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

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

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

import {
  shapeOptions, typeOptions,
} from './data';

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

type Props = i18nProps & OptionPropsType;

const ShapeOption: React.SFC<Props> = ({
  t,
  shape,
  color,
  opacity,
  width,
  setDataState = (): void => {
    // do nothing
  },
}: Props) => (
  <>
    <Wrapper>
      <Typography
        variant="subtitle"
        style={{ marginTop: '8px' }}
        align="left"
      >
        {t('style')}
      </Typography>
      <SelectBox
        options={shapeOptions}
        style={{ marginRight: '10px' }}
        onChange={(item: Record<string, any>): void => { setDataState({ shape: item.key }); }}
      />
      {
        shape !== 'line' && shape !== 'arrow' && (
          <SelectBox
            options={typeOptions}
            onChange={(item: Record<string, any>): void => { setDataState({ type: item.key }); }}
          />
        )
      }
    </Wrapper>
    <Wrapper>
      <ColorSelector
        title={t('color')}
        mode="shape"
        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>
    <Wrapper>
      <SliderWithTitle
        title={t('width')}
        value={width}
        tips={`${width}pt`}
        onSlide={(val: number): void => { setDataState({ width: val }); }}
        maximum={40}
      />
    </Wrapper>
  </>
);

const translator = withTranslation('sidebar');

type TransProps = WithTranslation & OptionPropsType;

export default translator<TransProps>(ShapeOption);