import React from 'react';

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

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

const fontOptions = [
  {
    key: 'helvetica',
    content: 'Helvetica',
    value: '',
  },
  {
    key: 'arial',
    content: 'Arial',
    value: '',
  },
];

const sizeOptions = [
  {
    key: 'size_12',
    content: 12,
    value: '',
  },
  {
    key: 'size_14',
    content: 14,
    value: '',
  },
  {
    key: 'size_18',
    content: 18,
    value: '',
  },
  {
    key: 'size_24',
    content: 24,
    value: '',
  },
  {
    key: 'size_36',
    content: 36,
    value: '',
  },
  {
    key: 'size_48',
    content: 48,
    value: '',
  },
  {
    key: 'size_64',
    content: 64,
    value: '',
  },
];

const TextTools = () => {
  return (
    <ExpansionPanel
      label={
        <Button shouldFitContainer align="left">
          <Icon glyph="text" style={{marginRight: '10px'}}/>
          Text
        </Button>
      }
    >
      <Wrapper>
        <Typography variant="subtitle" style={{marginTop: '8px'}}>Fonts</Typography>
        <Group>
          <SelectBox options={fontOptions} />
          <Item size="small">
            <Icon glyph="bold" />
          </Item>
          <Item size="small">
            <Icon glyph="italic" />
          </Item>
        </Group>
      </Wrapper>
      <Wrapper width="40%">
        <Typography variant="subtitle" style={{marginTop: '8px'}}>Size</Typography>
        <Group>
          <SelectBox options={sizeOptions} />
        </Group>
      </Wrapper>
      <Wrapper width="60%">
        <Typography variant="subtitle" style={{marginTop: '8px'}}>Align</Typography>
        <Group>
          <Item size="small">
            <Icon glyph="align-left" />
          </Item>
          <Item size="small">
            <Icon glyph="align-center" />
          </Item>
          <Item size="small">
            <Icon glyph="align-right" />
          </Item>
        </Group>
      </Wrapper>
      <Wrapper>
        <ColorSelect />
      </Wrapper>
      <Wrapper>
        <Typography variant="subtitle" style={{marginTop: '8px'}}>Opacity</Typography>
        <Group>
          <SliderWrapper>
            <Sliders />
          </SliderWrapper>
          40%
        </Group>
      </Wrapper>
    </ExpansionPanel>
  );
};

export default TextTools;