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

import Button from '../components/Button';
import Icon from '../components/Icon';
import ExpansionPanel from '../components/ExpansionPanel';

import TextfieldTool from './TextfieldTool';
import CheckboxTool from './CheckboxTool';
import RadioButtonTool from './RadioButtonTool';

import useStore from '../store';
import useActions from '../actions';

type Props = {
  sidebarState: string;
  onClickSidebar: (state: string) => void;
};

const FormTools: React.FC<Props> = ({
  sidebarState,
  onClickSidebar,
}: Props) => {
  const { t } = useTranslation('sidebar');
  const [{ toolState }, dispatch] = useStore();
  const { setTool } = useActions(dispatch);

  const isActive = sidebarState === 'create-form';

  const onClickTool = (state: string): void => {
    if (state === toolState) {
      setTool('');
    } else {
      setTool(state);
    }
  };

  const Label = (
    <Button
      shouldFitContainer
      align="left"
      onClick={(): void => {
        onClickSidebar('create-form');
      }}
    >
      <Icon glyph="create-form" style={{ marginRight: '10px' }} />
      {t('createForm')}
      <Icon
        glyph="dropdown-arrow"
        style={{
          transform: isActive ? 'rotate(180deg)' : 'rotate(0deg)',
          marginLeft: '10px',
        }}
      />
    </Button>
  );

  return (
    <ExpansionPanel label={Label} isActive={isActive}>
      <TextfieldTool
        title={t('textField')}
        isActive={toolState === 'textfield'}
        onClick={(): void => {
          onClickTool('textfield');
        }}
      />
      <CheckboxTool
        title={t('checkBox')}
        isActive={toolState === 'checkbox'}
        onClick={(): void => {
          onClickTool('checkbox');
        }}
      />
      <RadioButtonTool
        title={t('radioButton')}
        isActive={toolState === 'radio'}
        onClick={(): void => {
          onClickTool('radio');
        }}
      />
    </ExpansionPanel>
  );
};

export default FormTools;