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

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

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

const Pagination: React.FunctionComponent<Props> = ({
  currentPage = 1,
  totalPage = 1,
  onChange,
}: Props) => {
  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 (
    <Wrapper>
      <Text>Page</Text>
      <ArrowButton onClick={handleLeftClick} variant="left" />
      <Input
        type="tel"
        onChange={handleChange}
        onKeyDown={handleKeyDown}
        value={inputValue}
      />
      <ArrowButton onClick={handleRightClick} variant="right" />
      <Text>
        of
        {' '}
        {totalPage}
      </Text>
    </Wrapper>
  );
};

export default Pagination;