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 { Group, Item, SliderWrapper } from '../../global/toolStyled';
import data from './data';

const Highlight: React.FunctionComponent = () => (
  <ExpansionPanel
    label={(
      <Button shouldFitContainer align="left">
        <Icon glyph="highlight" style={{ marginRight: '10px' }} />
        Highlight Tools
      </Button>
    )}
  >
    <Typography variant="subtitle" style={{ marginTop: '8px' }}>Style</Typography>
    <Group>
      {data.lineType.map(ele => (
        <Item key={ele.key}>
          <Icon glyph={ele.icon} />
        </Item>
      ))}
    </Group>
    <ColorSelect />
    <Typography variant="subtitle" style={{ marginTop: '8px' }}>Opacity</Typography>
    <Group>
      <SliderWrapper>
        <Sliders />
      </SliderWrapper>
      40%
    </Group>
  </ExpansionPanel>
);

export default Highlight;