import React from 'react';

import Icon from '../Icon';
import Button from '../Button';
import ExpansionPanel from '../ExpansionPanel';
import Typography from '../Typography';
import SelectBox from '../SelectBox';
import ColorSelect from '../ColorSelect';
import Sliders from '../Sliders';

import { Group, Item, SliderWrapper } from '../../global/toolStyled';

const BrushOptions = [
  {
    key: 'freehand',
    content: <Icon glyph="freehand" />,
  },
  {
    key: 'markpen',
    content: <Icon glyph="markpen" />,
  },
];

const Freehand = () => {
  return (
    <ExpansionPanel 
      label={
        <Button shouldFitContainer align="left">
          <Icon glyph="freehand" style={{marginRight: '10px'}} />
          Freehand
        </Button>
      }
    >
      <Typography variant="subtitle" style={{marginTop: '4px'}}>Tools</Typography>
      <Group>
        <SelectBox options={BrushOptions} />
        <Item size="small">
          <Icon glyph="eraser" />
        </Item>
        <Item size="small">
          <Icon glyph="redo" />
        </Item>
        <Item size="small">
          <Icon glyph="undo" />
        </Item>
      </Group>
      <ColorSelect />
      <Typography variant="subtitle" style={{marginTop: '4px'}}>Opacity</Typography>
      <Group>
        <SliderWrapper>
          <Sliders />
        </SliderWrapper>
        40%
      </Group>
      <Typography variant="subtitle" style={{marginTop: '8px'}}>Width</Typography>
      <Group>
        <SliderWrapper>
          <Sliders />
        </SliderWrapper>
        12pt
      </Group>
    </ExpansionPanel>
  );
};

export default Freehand;