import React, { useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';

import { Container, Text, Input, ArrowButton } from './styled';

type Props = {
  currentPage: number;
  totalPage: number;
  onChange: (page: number) => void;
};

const Pagination: React.FC<Props> = ({
  currentPage = 1,
  totalPage = 1,
  onChange = (): void => {
    // do nothing
  },
}: Props) => {
  const { t } = useTranslation('toolbar');
  const [inputValue, setInputValue] = useState(currentPage);

  const handleRightClick = (): void => {
    const nextPage = currentPage + 1;

    if (nextPage <= totalPage) {
      onChange(nextPage);
    }
  };

  const handleLeftClick = (): void => {
    const prevPage = currentPage - 1;

    if (prevPage > 0) {
      onChange(prevPage);
    }
  };

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>): void => {
    const page = parseInt(e.target.value, 10) || 0;

    if (page >= 0 && page <= totalPage) {
      setInputValue(page);
    }
  };

  const handleKeyDown = (e: React.KeyboardEvent): void => {
    if (e.keyCode === 13) {
      onChange(inputValue);
    }
  };

  useEffect(() => {
    setInputValue(currentPage);
  }, [currentPage]);

  return (
    <Container>
      <Text>{t('page')}</Text>
      <ArrowButton onClick={handleLeftClick} variant="left" />
      <Input
        type="tel"
        onChange={handleChange}
        onKeyDown={handleKeyDown}
        value={inputValue}
      />
      <ArrowButton onClick={handleRightClick} variant="right" />
      <Text>{`${t('of')} ${totalPage}`}</Text>
    </Container>
  );
};

export default Pagination;