import React from 'react';

import Icon from '../Icon';
import Typography from '../Typography';
import ColorSelector from '../ColorSelector';
import SliderWithTitle from '../SliderWithTitle';

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

type Props = {
  type: string;
  setType: (arg: string) => void;
  color: string;
  setColor: (arg: string) => void;
  opacity: number;
  handleOpacity: (arg: number) => void;
};

const HighlightOption = ({
  type,
  setType,
  color,
  setColor,
  opacity,
  handleOpacity,
}: Props): React.ReactElement => (
  <>
    <Typography variant="subtitle" style={{ marginTop: '8px' }} align="left">Style</Typography>
    <Group>
      {data.lineType.map(ele => (
        <Item
          key={ele.key}
          selected={type === ele.key}
          onClick={(): void => { setType(ele.key); }}
        >
          <Icon glyph={ele.icon} />
        </Item>
      ))}
    </Group>
    <ColorSelector showTitle color={color} onClick={setColor} />
    <SliderWithTitle
      title="Opacity"
      value={opacity}
      tips={`${opacity}%`}
      onSlide={handleOpacity}
    />
  </>
);

export default HighlightOption;