import React from 'react';

import Icon from '../Icon';
import Pagination from '../Pagination';
import SelectBox from '../SelectBox';
import Divider from '../Divider';
import { SelectOptionType, ViewportType } from '../../constants/type';
import { scaleCheck } from '../../helpers/utility';

import { Wrapper } from './styled';
import { scaleOptions } from './data';

type Props = {
  totalPage: number;
  currentPage: number;
  setCurrentPage: (num: number) => void;
  changeScale: (num: number | string) => void;
  changeRotate: (num: number) => void;
  scale: number;
  rotation: number;
  viewport: ViewportType;
};

const Toolbar: React.FunctionComponent<Props> = ({
  totalPage,
  currentPage,
  setCurrentPage,
  changeScale,
  changeRotate,
  scale,
  rotation,
  viewport,
}) => {
  const handleClockwiseRotation = () => {
    const r = rotation + 90;
    changeRotate(r);
  };

  const handleCounterclockwiseRotation = () => {
    const r = rotation - 90;
    changeRotate(r);
  }

  const handleScaleSelect = async (selected: SelectOptionType) => {
    if (selected.value === 'fit') {
      const screenHeight = window.screen.height - 200;
      const originPdfHeight = viewport.height / scale;
      const rate = screenHeight / originPdfHeight;
      changeScale(rate);
    } else {
      changeScale(scaleCheck(selected.value as number));
    }
  }

  const handleZoomIn = () => {
    changeScale(scaleCheck(scale * 100 + 10));
  };

  const handleZoomOut = () => {
    changeScale(scaleCheck(scale * 100 - 10));
  };

  return (
    <Wrapper>
      <Pagination totalPage={totalPage} currentPage={currentPage} onChange={setCurrentPage} />
      <Divider />
      <Icon glyph="hand" style={{width: '30px'}} />
      <Icon glyph="zoom-in" style={{width: '30px'}} onClick={handleZoomIn} />
      <Icon glyph="zoom-out" style={{width: '30px'}} onClick={handleZoomOut} />
      <SelectBox options={scaleOptions} 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} />
    </Wrapper>
  );
};

export default Toolbar;
