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

import Typography from '../components/Typography';
import FormTools from './FormTools';
import MarkupTools from './MarkupTools';
import ImageTool from './ImageTool';
import WatermarkTool from './WatermarkTool';
import InsertCursor from './InsertCursor';

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

import { SidebarWrapper } from '../global/otherStyled';

const Sidebar: React.FC = () => {
  const { t } = useTranslation('sidebar');

  const [{ sidebarState }, dispatch] = useStore();
  const { setSidebar } = useActions(dispatch);

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

  return (
    <SidebarWrapper>
      <Typography
        light
        style={{ marginLeft: '30px', marginTop: '46px' }}
        align="left"
      >
        {t('mainMenu')}
      </Typography>
      <MarkupTools
        sidebarState={sidebarState}
        onClickSidebar={handleClickSidebar}
      />
      <FormTools
        sidebarState={sidebarState}
        onClickSidebar={handleClickSidebar}
      />
      <ImageTool onClickSidebar={handleClickSidebar} />
      <WatermarkTool onClickSidebar={handleClickSidebar} />
      <InsertCursor />
    </SidebarWrapper>
  );
};

export default Sidebar;