import React from 'react';

import Button from '../Button';
import ExpansionPanel from '../ExpansionPanel';
import Icon from '../Icon';
import HighlightTools from '../HighlightTools';
import Freehand from '../Freehand';
import TextTools from '../TextTools';
import Shape from '../Shape';

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

type Props = {
  sidebarState: string;
  onClick: (state: string) => void;
};

const MarkupTools: React.FunctionComponent<Props> = ({
  onClick,
  sidebarState,
}) => {
  return (
    <ExpansionPanel
      label={
        <Button shouldFitContainer align="left" onClick={() => { onClick('markup-tools'); }}>
          <Icon glyph="markup-tools" style={{marginRight: '10px'}}/>
          Markup Tools
        </Button>
      }
      isActive={sidebarState === 'markup-tools'}
    >
      <HighlightTools />
      <Freehand />
      <TextTools />
      <BtnWrapper>
        <Button shouldFitContainer align="left">
          <Icon glyph="sticky-note" style={{marginRight: '10px'}}/>
          Sticky Note
        </Button>
      </BtnWrapper>
      <Shape />
    </ExpansionPanel>
  );
};

export default MarkupTools;