import React from 'react';
import { useTranslation } from 'react-i18next';

import Icon from '../Icon';
import Pagination from '../Pagination';
import SelectBox from '../SelectBox';
import Divider from '../Divider';
import { scaleCheck } from '../../helpers/utility';

import { Container } from './styled';
import dataset from './data';

type Props = {
  totalPage: number;
  currentPage: number;
  setCurrentPage: (num: number) => void;
  changeScale: (num: number | string) => void;
  handleClockwiseRotation: () => void;
  handleCounterclockwiseRotation: () => void;
  handleZoomIn: () => void;
  handleZoomOut: () => void;
  handleMouseOver: () => void;
  scale: number;
  viewport: ViewportType;
  displayMode: string;
  handleHandClick: () => void;
  hidden: boolean;
};

const Toolbar: React.FC<Props> = ({
  totalPage,
  currentPage,
  setCurrentPage,
  changeScale,
  handleClockwiseRotation,
  handleCounterclockwiseRotation,
  handleZoomIn,
  handleZoomOut,
  handleMouseOver,
  scale,
  viewport,
  displayMode,
  handleHandClick,
  hidden,
}: Props) => {
  const { t } = useTranslation('toolbar');
  const data = dataset(t);

  const handleScaleSelect = (selected: SelectOptionType) => {
    if (selected.child === 'fit') {
      const screenWidth = window.document.body.offsetWidth - 288;
      const originPdfWidth = viewport.width / scale;
      const rate = screenWidth / originPdfWidth;
      changeScale(rate);
    } else {
      changeScale(scaleCheck(selected.child as number));
    }
  };

  return (
    <Container
      onMouseOver={handleMouseOver}
      hidden={hidden}
      displayMode={displayMode}
    >
      <Pagination
        totalPage={totalPage}
        currentPage={currentPage}
        onChange={setCurrentPage}
      />
      <Divider />
      <Icon glyph="hand" style={{ width: '30px' }} onClick={handleHandClick} />
      <Icon glyph="zoom-in" style={{ width: '30px' }} onClick={handleZoomIn} />
      <Icon
        glyph="zoom-out"
        style={{ width: '30px' }}
        onClick={handleZoomOut}
      />
      <SelectBox
        options={data.scaleOptions}
        style={{ width: '94px' }}
        useInput
        isDivide
        onChange={handleScaleSelect}
        defaultValue={`${Math.round(scale * 100)} %`}
      />
      <Divider />
      <Icon
        glyph="rotate-left"
        style={{ width: '30px' }}
        onClick={handleCounterclockwiseRotation}
      />
      <Icon
        glyph="rotate-right"
        style={{ width: '30px' }}
        onClick={handleClockwiseRotation}
      />
    </Container>
  );
};

export default Toolbar;