import { useFormContext, Controller } from 'react-hook-form';

import FormControl, { FormControlProps } from '@material-hu/mui/FormControl';
import MenuItem from '@material-hu/mui/MenuItem';
import Select, { SelectProps } from '@material-hu/mui/Select';

import { Form, FormSkip, FromSkipType, Step } from 'src/types/form';
import { useLokaliseTranslation } from 'src/utils/i18n';

import CircularProgress from 'src/components/CircularProgress';

type Props = {
  name: string;
  label?: string;
  selectProps?: SelectProps;
  formControlProps?: FormControlProps;
  loading?: boolean;
  form: Form;
  step: Step;
};

const NO_SKIP = 'NO_SKIP';
const formatOut = (value: string) => {
  switch (value) {
    case NO_SKIP:
      return null;
    case FromSkipType.END:
      return { skipType: FromSkipType.END };
    default:
      return { skipType: FromSkipType.STEP, destinationStepId: value };
  }
};

const formatIn = (skip: FormSkip) =>
  skip?.destinationStepId || (skip ? FromSkipType.END : NO_SKIP);

function FormSkipSelect({
  name,
  label,
  selectProps,
  formControlProps,
  loading = false,
  form,
  step,
}: Props) {
  const { control } = useFormContext();
  const { t } = useLokaliseTranslation('backoffice_only');

  const skipOptions = [
    { label: t('backoffice_only:form_skip_select.continue'), value: NO_SKIP },
    ...(form.steps
      ?.filter(s => s.id !== step.id)
      .map(s => ({
        label: t('backoffice_only:form_skip_select.go_to_section', {
          i: s.position,
          title: s.title,
        }),
        value: s.id,
      })) ?? []),
    {
      label: t('backoffice_only:form_skip_select.submit'),
      value: FromSkipType.END,
    },
  ];

  return (
    <FormControl {...formControlProps}>
      <Controller
        control={control}
        name={name}
        render={({ field: { ref, value, onChange, ...field } }) => (
          <Select
            label={label}
            {...field}
            value={formatIn(value)}
            onChange={event =>
              onChange(formatOut(event.target.value as string))
            }
            IconComponent={
              loading
                ? () => (
                    <CircularProgress
                      centered
                      size={15}
                      sx={{ mr: 2 }}
                    />
                  )
                : undefined
            }
            {...selectProps}
            inputRef={ref}
          >
            {skipOptions.map(option => (
              <MenuItem
                value={option.value}
                key={option.value}
              >
                {option.label}
              </MenuItem>
            ))}
          </Select>
        )}
      />
    </FormControl>
  );
}

export default FormSkipSelect;