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 useActions from '../actions';
import useStore from '../store';
import { BtnWrapper } from '../global/toolStyled';

const CreateForm: React.FC = () => {
  const { t } = useTranslation('sidebar');
  const [{ sidebarState }, dispatch] = useStore();
  const { setSidebar } = useActions(dispatch);

  const onClickSidebar = (state: string): void => {
    if (state === sidebarState) {
      setSidebar('');
    } else {
      setSidebar(state);
    }
  };

  const Label = (
    <Button
      shouldFitContainer
      align="left"
      onClick={(): void => {
        onClickSidebar('create-form');
      }}
    >
      <Icon glyph="create-form" style={{ marginRight: '10px' }} />
      {t('createForm')}
    </Button>
  );

  return (
    <ExpansionPanel label={Label} isActive={sidebarState === 'create-form'}>
      <BtnWrapper>
        <Button shouldFitContainer align="left">
          <Icon glyph="text-field" style={{ marginRight: '10px' }} />
          {t('textField')}
        </Button>
      </BtnWrapper>
      <BtnWrapper>
        <Button shouldFitContainer align="left">
          <Icon glyph="checkbox" style={{ marginRight: '10px' }} />
          {t('checkBox')}
        </Button>
      </BtnWrapper>
      <BtnWrapper>
        <Button shouldFitContainer align="left">
          <Icon glyph="radio-button" style={{ marginRight: '10px' }} />
          {t('radioButton')}
        </Button>
      </BtnWrapper>
    </ExpansionPanel>
  );
};

export default CreateForm;