import React from 'react';

import ToolbarComponent from '../components/Toolbar';

import useActions from '../actions';
import useStore from '../store';

import { scrollIntoView } from '../helpers/utility';

const Toolbar: React.FC = () => {
  const [
    { totalPage, currentPage, scale, rotation, viewport, displayMode },
    dispatch,
  ] = useStore();
  const {
    setCurrentPage: setCurrentPageAction,
    changeScale,
    changeRotate,
    toggleDisplayMode,
    setMarkupTool,
  } = useActions(dispatch);

  const setCurrentPage = (num: number): void => {
    if (num > 0) {
      const ele: HTMLElement = document.getElementById(
        `page_${num}`
      ) as HTMLElement;
      scrollIntoView(ele);
    }
    setCurrentPageAction(num);
  };

  const handleHandClick = (): void => {
    setMarkupTool('');
  };

  return (
    <ToolbarComponent
      totalPage={totalPage}
      currentPage={currentPage}
      setCurrentPage={setCurrentPage}
      changeScale={changeScale}
      changeRotate={changeRotate}
      handleHandClick={handleHandClick}
      scale={scale}
      rotation={rotation}
      viewport={viewport}
      displayMode={displayMode}
      toggleDisplayMode={toggleDisplayMode}
    />
  );
};

export default Toolbar;