import React from 'react';

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

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

const shapeOptions = [
  {
    key: 'circle',
    content: <Icon glyph="circle" />,
    value: '',
  },
  {
    key: 'rectangle',
    content: <Icon glyph="rectangle" />,
    value: '',
  },
  {
    key: 'line',
    content: <Icon glyph="line" />,
    value: '',
  },
  {
    key: 'arrow',
    content: <Icon glyph="arrow" />,
    value: '',
  },
];
const typeOptions = [
  {
    key: 'border',
    content: <Icon glyph="border" />,
    value: '',
  },
  {
    key: 'fill',
    content: <Icon glyph="fill" />,
    value: '',
  },
];

const Shape = () => {
  return (
    <ExpansionPanel 
      label={
        <Button shouldFitContainer align="left">
          <Icon glyph="shape" style={{marginRight: '10px'}} />
          Shape
        </Button>
      }
    >
      <Typography>Shape</Typography>
      <SelectBox options={shapeOptions} style={{marginRight: '10px'}} />
      <SelectBox options={typeOptions} />
      <ColorSelect />
      <Typography variant="subtitle" style={{marginTop: '8px'}}>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 Shape;
