import React from 'react';

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

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

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

const Toolbar = () => {
  const [{totalPage, currentPage, scale, rotation, viewport}, dispatch] = useStore();
  const { setCurrentPage, changeScale, changeRotate } = useActions(dispatch);

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

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

export default Toolbar;