import React, { useEffect } from 'react';
import { useRouter } from 'next/router';
import { useTranslation } from 'react-i18next';

// import Button from '../components/Button';
// import ExpansionPanel from '../components/ExpansionPanel';
// import Icon from '../components/Icon';
import HighlightTools from './HighlightTools';
import FreehandTools from './FreehandTools';
import TextTools from './FreeTextTools';
import StickyNoteTools from './StickyNoteTools';
import ShapeTools from './ShapeTools';
import WatermarkTool from './WatermarkTool';

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

const MarkupTools: React.FC = () => {
  const { t } = useTranslation('sidebar');
  const [{ sidebarState }, dispatch] = useStore();
  const { setSidebar } = useActions(dispatch);

  const router = useRouter();

  // const onClickSidebar = (state: string): void => {
  //   if (state === sidebarState) {
  //     setSidebar('');
  //   } else {
  //     setSidebar(state);
  //   }
  // };

  const onClickTool = (state: string): void => {
    if (state === sidebarState) {
      setSidebar('');
    } else {
      setSidebar(state);
    }
  };

  // useEffect(() => {
  //   if (sidebarState !== 'markup-tools') {
  //     setSidebar('');
  //   }
  // }, []);

  // const Label = (
  //   <Button
  //     shouldFitContainer
  //     align="left"
  //     onClick={(): void => {
  //       onClickSidebar('markup-tools');
  //     }}
  //   >
  //     <Icon glyph="markup-tools" style={{ marginRight: '10px' }} />
  //     {t('markupTool')}
  //   </Button>
  // );

  useEffect(() => {
    if (router.query.tool === 'shape') {
      setSidebar('shape');
    } else {
      setSidebar('highlight');
    }
  }, [router]);

  return (
    <>
      <HighlightTools
        title={t('annotate')}
        isActive={sidebarState === 'highlight'}
        onClick={(): void => {
          onClickTool('highlight');
        }}
      />
      <FreehandTools
        title={t('freehand')}
        isActive={sidebarState === 'freehand'}
        onClick={(): void => {
          onClickTool('freehand');
        }}
      />
      <TextTools
        title={t('textBox')}
        isActive={sidebarState === 'text'}
        onClick={(): void => {
          onClickTool('text');
        }}
      />
      <StickyNoteTools
        title={t('stickyNote')}
        isActive={sidebarState === 'sticky'}
        onClick={(): void => {
          onClickTool('sticky');
        }}
      />
      <ShapeTools
        title={t('shape')}
        isActive={sidebarState === 'shape'}
        onClick={(): void => {
          onClickTool('shape');
        }}
      />
      <WatermarkTool />
    </>
  );
};

export default MarkupTools;