import { FormProvider, useForm, useWatch } from 'react-hook-form';

import Stack from '@material-hu/mui/Stack';
import { useTheme } from '@material-hu/mui/styles';

import HuDrawer from '@material-hu/components/design-system/Drawer';
import HuFormInputClassic from '@material-hu/components/design-system/Inputs/Classic/form';

import {
  type CompetencyCategory,
  type CreateCompetencyCategoryParams,
} from 'src/types/competencies';
import { useLokaliseTranslation } from 'src/utils/i18n';

type UpdateCategoryDrawerProps = {
  open: boolean;
  onClose: () => void;
  onSubmit: (data: CreateCompetencyCategoryParams) => void;
  isEdit?: boolean;
  categoryToEdit?: CompetencyCategory | null;
};

const UpdateCategoryDrawer = (props: UpdateCategoryDrawerProps) => {
  const { open, onClose, onSubmit, isEdit = false, categoryToEdit } = props;
  const { t } = useLokaliseTranslation('competencies');
  const { palette } = useTheme();

  const form = useForm<CreateCompetencyCategoryParams>({
    defaultValues: {
      name: categoryToEdit?.name || '',
      description: categoryToEdit?.description || '',
    },
  });

  const name = useWatch({ control: form.control, name: 'name' });

  const handleClose = () => {
    form.reset();
    onClose();
  };

  return (
    <HuDrawer
      open={open}
      onClose={handleClose}
      title={isEdit ? t('edit_category') : t('create_category')}
      primaryButtonProps={{
        children: isEdit ? t('general:update') : t('general:create'),
        onClick: form.handleSubmit(onSubmit),
        disabled: name === '',
      }}
      secondaryButtonProps={{
        children: t('general:cancel'),
        onClick: handleClose,
        fullWidth: true,
      }}
    >
      <FormProvider {...form}>
        <Stack sx={{ gap: 2 }}>
          <Stack
            sx={{
              p: 2,
              backgroundColor: palette.new.background.layout.default,
              borderRadius: 2,
            }}
          >
            <HuFormInputClassic
              name="name"
              inputProps={{
                label: t('general:name'),
                hasCounter: false,
                showClear: false,
              }}
              rules={{ required: true }}
            />
          </Stack>
          <Stack
            sx={{
              p: 2,
              backgroundColor: palette.new.background.layout.default,
              borderRadius: 2,
            }}
          >
            <HuFormInputClassic
              name="description"
              inputProps={{
                label: t('general:inputs.optional', {
                  label: t('general:description'),
                }),
                placeholder: t('general:write_comment'),
                multiline: true,
                hasCounter: false,
                maxLength: 1000,
              }}
              rules={{ required: false }}
            />
          </Stack>
        </Stack>
      </FormProvider>
    </HuDrawer>
  );
};

export default UpdateCategoryDrawer;