import React from 'react';
import { useTranslation } from 'react-i18next';

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

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

const FreehandOption: React.SFC<OptionPropsType> = ({
  // type,
  color,
  opacity,
  width,
  setDataState = (): void => {
    // do nothing
  },
}: OptionPropsType) => {
  const { t } = useTranslation('sidebar');

  return (
    <>
      {/* <Wrapper>
        <Typography variant="subtitle" style={{ marginTop: '4px' }} align="left">
          {t('style')}
        </Typography>
        <Group>
          <Item
            size="small"
            selected={type === 'pen'}
            onClick={(): void => { setDataState({ type: 'pen' }); }}
          >
            <Icon glyph="freehand" />
          </Item>
          <Item size="small">
            <Icon glyph="eraser" />
          </Item>
          <Item size="small">
            <Icon glyph="redo" />
          </Item>
          <Item size="small">
            <Icon glyph="undo" />
          </Item>
        </Group>
      </Wrapper> */}
      <Wrapper>
        <ColorSelector
          title={t('color')}
          mode="freehand"
          selectedColor={color}
          onClick={(selected: string): void => {
            setDataState({ color: selected });
          }}
          throughPortal
        />
      </Wrapper>
      <Wrapper>
        <SliderWithTitle
          title={t('opacity')}
          value={opacity}
          tips={`${opacity}%`}
          onSlide={(val: number): void => {
            setDataState({ opacity: val });
          }}
        />
      </Wrapper>
      <Wrapper>
        <SliderWithTitle
          title={t('brushSize')}
          value={width}
          tips={`${width} pt`}
          onSlide={(val: number): void => {
            setDataState({ width: val });
          }}
          maximum={40}
        />
      </Wrapper>
      {/* <Wrapper>
        <Group style={{ marginTop: '20px', paddingRight: '40px' }}>
          <Button
            appearance="danger-hollow"
            shouldFitContainer
          >
            <Icon glyph="clear" style={{ marginRight: '5px' }} />
            {t('clear')}
          </Button>
        </Group>
      </Wrapper> */}
    </>
  );
};

export default FreehandOption;