import React from 'react';

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

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

import data from './data';

type Props = {
  showTitle?: boolean;
  color?: string;
  onClick: (color: string) => void;
};

const ColorSelector: React.FunctionComponent<Props> = ({
  showTitle = false,
  color = '',
  onClick,
}: Props) => (
  <>
    { showTitle ? <Typography variant="subtitle" style={{ marginTop: '8px' }}>Color</Typography> : null}
    <Group>
      {data.map(ele => (
        <Item
          key={ele.key}
          selected={color === ele.color}
          onMouseDown={(): void => { onClick(ele.color); }}
        >
          <Circle color={ele.color} />
        </Item>
      ))}
      <Item>
        <Icon glyph="color-picker" />
      </Item>
    </Group>
  </>
);

export default ColorSelector;