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 '../ColorSelector';
import Sliders from '../Sliders';

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

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

type Props = {
  isActive: boolean;
  onClick: () => void;
};

const Freehand: React.FunctionComponent<Props> = ({
  isActive,
  onClick,
}: Props) => (
  <ExpansionPanel
    label={(
      <Button
        shouldFitContainer
        align="left"
        onClick={onClick}
        isActive={isActive}
      >
        <Icon glyph="freehand" style={{ marginRight: '10px' }} />
        Freehand
      </Button>
    )}
    isActive={isActive}
  >
    <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 showTitle color="" onClick={(): void => {}} />
    <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;