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 '../ColorSelector';
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: '',
  },
];

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

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