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

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

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

import type {
  Competency,
  CompetencyCategory,
  CompetencyCategoryOption,
  CreateCompetencyParams,
  UpdateCompetencyFormValues,
} from 'src/types/competencies';
import { useLokaliseTranslation } from 'src/utils/i18n';

type UpdateCompetencyDrawerProps = {
  open: boolean;
  onClose: () => void;
  onSubmit: (data: CreateCompetencyParams) => void;
  isEdit?: boolean;
  competencyToEdit?: Competency | null;
  categories?: CompetencyCategory[];
  isLoadingCategories: boolean;
  onCategorySearchChange: (search: string) => void;
};

const UpdateCompetencyDrawer = (props: UpdateCompetencyDrawerProps) => {
  const {
    open,
    onClose,
    onSubmit,
    isEdit = false,
    competencyToEdit,
    categories = [],
    isLoadingCategories,
    onCategorySearchChange,
  } = props;
  const { t } = useLokaliseTranslation('competencies');
  const { palette } = useTheme();

  const assignedCategoryId = competencyToEdit?.category?.id;
  const assignedCategoryName = competencyToEdit?.category?.name;

  const categoryOptions = useMemo(() => {
    const base = categories.map(c => ({ value: c.id, label: c.name }));
    if (
      !isNil(assignedCategoryId) &&
      !isNil(assignedCategoryName) &&
      !base.some(o => o.value === assignedCategoryId)
    ) {
      return [
        { value: assignedCategoryId, label: assignedCategoryName },
        ...base,
      ];
    }
    return base;
  }, [categories, assignedCategoryId, assignedCategoryName]);

  const defaultCategory: CompetencyCategoryOption | null =
    competencyToEdit?.category
      ? {
          value: competencyToEdit.category.id,
          label: competencyToEdit.category.name,
        }
      : null;

  const form = useForm<UpdateCompetencyFormValues>({
    defaultValues: {
      name: competencyToEdit?.name || '',
      description: competencyToEdit?.description || '',
      category: defaultCategory,
    },
  });

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

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

  const handleSubmit = form.handleSubmit(values => {
    onSubmit({
      name: values.name,
      description: values.description,
      categoryId: values.category?.value,
    });
  });

  return (
    <HuDrawer
      open={open}
      onClose={handleClose}
      title={isEdit ? t('edit_competency') : t('create_competency')}
      primaryButtonProps={{
        children: isEdit ? t('general:update') : t('general:create'),
        onClick: handleSubmit,
        disabled: name === '',
        fullWidth: true,
      }}
      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: 2000,
              }}
              rules={{ required: false }}
            />
          </Stack>
          <Stack
            sx={{
              p: 2,
              backgroundColor: palette.new.background.layout.default,
              borderRadius: 2,
            }}
          >
            <FormAutocomplete
              name="category"
              options={categoryOptions}
              autocompleteProps={{
                label: t('general:inputs.optional', {
                  label: t('general:category'),
                }),
                placeholder: t('search_category_placeholder'),
                isServerFiltered: true,
                loading: isLoadingCategories,
                onInputChange: (_event, value) => onCategorySearchChange(value),
              }}
              rules={{ required: false }}
            />
          </Stack>
        </Stack>
      </FormProvider>
    </HuDrawer>
  );
};

export default UpdateCompetencyDrawer;