import React, { useState, useEffect } from 'react';

// Redux part
import { useSelector, useDispatch } from 'react-redux';
import { StoreState } from 'store/rootReducer';

// Import actions here

import classNames from 'classnames/bind';
import TextItem from 'components/items/TextItem';
import ReactPaginate from 'react-paginate';
import { withRouter } from 'react-router-dom';
import qs from 'query-string';
import { getContent } from 'store/utils/helper';
import styleIdentifiers from './Pagination.module.scss';

const styles = classNames.bind(styleIdentifiers);

export interface StateProps {}

export interface DispatchProps {}

export interface OwnProps {}

export type PaginationProps = StateProps & DispatchProps & OwnProps;

const Pagination = (props: PaginationProps) => {
  const {
    location: { search, pathname },
    history,
    count,
    limit,
    current,
  } = props;
  // mapStateToProps
  const lg = useSelector((state: StoreState) => state.content.lg);
  const content = useSelector((state: StoreState) => state.content.raw);
  // Allow to dispatch actions
  const dispatch = useDispatch();

  const submitPage = page => {
    console.log('page', page);
    const data = {
      ...qs.parse(search),
      page: page.selected + 1,
    };

    history.push({
      pathname,
      search: qs.stringify(data),
    });
  };

  if (!count) return false;

  if (count <= limit) return false;

  return (
    <ReactPaginate
      pageCount={Math.ceil(count / limit)}
      pageRangeDisplayed={2}
      marginPagesDisplayed={1}
      // initialPage={parseInt(currentPage - 1, 10)}
      forcePage={(current || 1) - 1}
      disableInitialCallback
      breakLabel="..."
      onPageChange={submitPage}
      previousLabel={getContent(content, 'general.actions.previous', lg)}
      nextLabel={getContent(content, 'general.actions.next', lg)}
      containerClassName={styles('pages')}
      pageClassName={styles('page')}
      activeClassName={styles('active')}
      disabledClassName={styles('disabled')}
    />
  );
};

export default withRouter(Pagination);
