import React from 'react';
import { WithTranslation } from 'next-i18next';
import { withTranslation } from '../../i18n';

import Icon from '../Icon';
import Typography from '../Typography';
import SliderWithTitle from '../SliderWithTitle';
import ColorSelector from '../ColorSelector';
import SelectBox from '../SelectBox';
import { OptionPropsType, SelectOptionType } from '../../constants/type';

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

import {
  fontOptions,
  sizeOptions,
  alignOptions,
  styleOptions,
} from './data';

type i18nProps = {
  t: (key: string) => string;
}

type Props = i18nProps & OptionPropsType;

const TextOption: React.SFC<Props> = ({
  t,
  fontName,
  fontSize,
  align,
  fontStyle,
  color,
  opacity,
  setDataState = (): void => {
    // do nothing
  },
}: Props) => (
  <>
    <Wrapper>
      <Typography
        variant="subtitle"
        style={{ marginTop: '8px' }}
        align="left"
      >
        {t('font')}
      </Typography>
      <Group>
        <SelectBox
          style={{ width: '100px' }}
          defaultValue={fontName}
          options={fontOptions}
          onChange={(option: SelectOptionType): void => {
            setDataState({ fontName: option.child });
          }}
        />
        {
          styleOptions.map(ele => (
            <Item
              key={ele.key}
              size="small"
              selected={fontStyle === ele.child}
              onClick={(): void => {
                setDataState({ fontStyle: ele.child === fontStyle ? '' : ele.child });
              }}
            >
              <Icon glyph={ele.key} />
            </Item>
          ))
        }
      </Group>
    </Wrapper>
    <Wrapper width="40%">
      <Typography
        variant="subtitle"
        style={{ marginTop: '8px' }}
        align="left"
      >
        {t('size')}
      </Typography>
      <Group>
        <SelectBox
          defaultValue={fontSize}
          options={sizeOptions}
          onChange={(option: SelectOptionType): void => {
            setDataState({ fontSize: option.child });
          }}
        />
      </Group>
    </Wrapper>
    <Wrapper width="60%">
      <Typography
        variant="subtitle"
        style={{ marginTop: '8px' }}
        align="left"
      >
        {t('align')}
      </Typography>
      <Group>
        {
          alignOptions.map(ele => (
            <Item
              key={ele.key}
              size="small"
              selected={align === ele.child}
              onClick={(): void => { setDataState({ align: ele.child }); }}
            >
              <Icon glyph={ele.key} />
            </Item>
          ))
        }
      </Group>
    </Wrapper>
    <Wrapper>
      <ColorSelector
        title={t('color')}
        selectedColor={color}
        onClick={(selected: string): void => { setDataState({ color: selected }); }}
      />
    </Wrapper>
    <Wrapper>
      <SliderWithTitle
        title={t('opacity')}
        value={opacity}
        tips={`${opacity}%`}
        onSlide={(val: number): void => { setDataState({ opacity: val }); }}
      />
    </Wrapper>
  </>
);

const translator = withTranslation('sidebar');

type TransProps = WithTranslation & OptionPropsType;

export default translator<TransProps>(TextOption);