import React from 'react';
import PropTypes from 'prop-types';

import Label from '../Label/src';
import Select from '../Select/src';
import ArrowButton, {ARROW_TYPE} from '../ArrowButton';

import './styles.scss';

const Pagination = (props) => {
  const {
    page,
    perPage,
    pageSizes,
    totalPages,
    setPageSize,
    previousPageHandler,
    nextPageHandler,
    parentElementId,
    paginationAmount,
    labelPerPage,
  } = props;

  const isFirstPage = page === 1;
  const isLastPage = page === totalPages;
  const selectElementId = `${parentElementId}-pagination-select-per-page`;

  const selectValues = pageSizes.map((size) => ({
    id: size,
    title: size,
  }));

  return (
    <div className="Pagination">
      <div className="Pagination__per-page">
        {labelPerPage && (
        <Label
          label={labelPerPage}
          for={selectElementId}
        />
        )}
        <Select
          shouldInvokeCallback={false}
          id={selectElementId}
          selectCallback={setPageSize}
          selectValues={selectValues}
          value={selectValues.find((selectValue) => selectValue.id === perPage)}
        />
      </div>
      {paginationAmount && (
        <div className="Pagination__amount">
          {paginationAmount}
        </div>
      )}
      <div className="Pagination__actions">
        <div className="Pagination__action">
          <ArrowButton
            type={ARROW_TYPE.FIRST}
            isDisabled={isFirstPage}
            elementId={`${parentElementId}-pagination-first-page-button`}
            onClick={() => previousPageHandler(1)}
          />
        </div>
        <div className="Pagination__action">
          <ArrowButton
            type={ARROW_TYPE.PREVIOUS}
            isDisabled={isFirstPage}
            elementId={`${parentElementId}-pagination-previous-page-button`}
            onClick={() => previousPageHandler(page - 1)}
          />
        </div>
        <div className="Pagination__action">
          <ArrowButton
            type={ARROW_TYPE.NEXT}
            isDisabled={isLastPage}
            elementId={`${parentElementId}-pagination-next-page-button`}
            onClick={() => nextPageHandler(page + 1)}
          />
        </div>
        <div className="Pagination__action">
          <ArrowButton
            type={ARROW_TYPE.LAST}
            isDisabled={isLastPage}
            elementId={`${parentElementId}-pagination-last-page-button`}
            onClick={() => nextPageHandler(totalPages)}
          />
        </div>
      </div>
    </div>
  );
};

Pagination.propTypes = {
  paginationAmount: PropTypes.oneOfType([
    PropTypes.string,
    PropTypes.element,
  ]),
  parentElementId: PropTypes.string.isRequired,
  labelPerPage: PropTypes.string,
  pageSizes: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])),
  page: PropTypes.number.isRequired,
  perPage: PropTypes.number.isRequired,
  totalPages: PropTypes.number.isRequired,
  nextPageHandler: PropTypes.func.isRequired,
  previousPageHandler: PropTypes.func.isRequired,
  setPageSize: PropTypes.func.isRequired,
};

Pagination.defaultProps = {
  paginationAmount: '',
  labelPerPage: '',
  pageSizes: [10, 20, 50, 100],
};

export default Pagination;