import React from 'react';
import { useTranslation } 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';

const TextOption: React.SFC<OptionPropsType> = ({
  fontName,
  fontSize,
  align,
  fontStyle,
  color,
  opacity,
  setDataState = (): void => {
    // do nothing
  },
}: OptionPropsType) => {
  const { t } = useTranslation('sidebar');

  return (
    <>
      <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>
    </>
  );
};

export default TextOption;