import React from 'react';
import { withTranslation } from '../i18n';

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

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

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

type Props = {
  t: (key: string) => string;
}

const Sidebar: React.FC<Props> = ({
  t,
}: Props) => {
  const [{ sidebarState, displayMode }, dispatch] = 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>
      <WatermarkTool />
    </SidebarWrapper>
  );
};

export default withTranslation('sidebar')(Sidebar);