import React from 'react';

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

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

import { BtnWrapper } from '../global/toolStyled';
import { SidebarWrapper } from '../global/otherStyled';
 
const Sidebar = () => {
  const [{ sidebarState }, dispatch] = useStore();
  const { switchSidebar } = useActions(dispatch);

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

  const transferProps = {
    onClick,
    sidebarState,
  }

  return (
    <SidebarWrapper>
      <Typography light style={{marginLeft: '30px', marginTop: '46px'}}>Main Menu</Typography>
      <MarkupTools {...transferProps} />
      <CreateForm {...transferProps} />
      <BtnWrapper>
        <Button shouldFitContainer align="left" onClick={() => { onClick('add-image'); }}>
          <Icon glyph="add-image" style={{marginRight: '10px'}}/>
          Add Image
        </Button>
      </BtnWrapper>
      <Watermark />
    </SidebarWrapper>
  );
};

export default Sidebar;
