import { useEffect, useState } from 'react';

import { TriangleLeftIcon, TriangleRightIcon } from '@/icons';

import OutlineButton from '../button/OutlineButton';

interface PaginationProps {
  page: number;
  onIncrementPage: () => void;
  onDecrementPage: () => void;
  setPageNumber?: (newPageNumber: number) => void;
  maxPages?: number;
  disableLeft?: boolean;
  disableRight?: boolean;
  zeroIndexed?: boolean;
}

const Pagination = ({
  page,
  onIncrementPage,
  onDecrementPage,
  setPageNumber,
  maxPages,
  disableLeft,
  disableRight,
  zeroIndexed = true,
}: PaginationProps) => {
  const [input, setInput] = useState(1);

  useEffect(() => {
    setInput(zeroIndexed ? page + 1 : page);
  }, [page]);

  function handlePaginationChange() {
    if (maxPages && setPageNumber) {
      if (input >= 1 && input <= maxPages) {
        setInput(input);
        setPageNumber(zeroIndexed ? input - 1 : input);
      } else {
        setInput(zeroIndexed ? page + 1 : page);
      }
    }
  }

  return (
    <div className='flex flex-row items-center gap-[5px] text-foreground-primary'>
      <OutlineButton
        onClick={onDecrementPage}
        isDisabled={disableLeft}
        label='Previous Page'
        className='px-2'
      >
        <TriangleLeftIcon />
      </OutlineButton>
      <div className='flex flex-row items-center'>
        {maxPages && setPageNumber ? (
          <input
            type='number'
            value={input}
            className='mx-0 w-3 rounded-lg bg-transparent text-center font-sans text-base ring-1 ring-transparent transition duration-300 ease-linear outline-none hover:ring-white focus:ring-white sm:w-6'
            onChange={(e) => setInput(e.target.valueAsNumber)}
            onKeyDownCapture={(e) => {
              if (e.key === 'Enter') {
                handlePaginationChange();
                e.currentTarget.blur();
              }
            }}
            onBlur={() => {
              handlePaginationChange();
            }}
          />
        ) : (
          <span className='mx-0 w-3 text-center font-sans text-base whitespace-nowrap sm:mx-1 sm:w-6'>
            {zeroIndexed ? page + 1 : page}
          </span>
        )}
      </div>
      <OutlineButton
        onClick={onIncrementPage}
        isDisabled={disableRight}
        aria-label='Next Page'
        className='px-2'
      >
        <TriangleRightIcon />
      </OutlineButton>
    </div>
  );
};

export default Pagination;