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

// import Button from '../components/Button';
import Typography from '../components/Typography';
// import Icon from '../components/Icon';
// import CreateForm from './CreateForm';
import MarkupTools from './MarkupTools';

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

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

const Sidebar: React.FC = () => {
  const { t } = useTranslation('sidebar');
  const [{ displayMode }] = useStore();
  // const { setSidebar } = useActions(dispatch);

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

  return (
    <SidebarWrapper isHidden={displayMode === 'full'}>
      <Typography
        light
        style={{ marginLeft: '30px', marginTop: '46px' }}
        align="left"
      >
        {t('mainMenu')}
      </Typography>
      <MarkupTools />
      {/* <CreateForm /> */}
      {/* <BtnWrapper>
        <Button shouldFitContainer align="left" onClick={(): void => { onClick('add-image'); }}>
          <Icon glyph="add-image" style={{ marginRight: '10px' }} />
          {t('addImages')}
        </Button>
      </BtnWrapper> */}
    </SidebarWrapper>
  );
};

export default Sidebar;