import { useEffect } from 'react';
import { FormProvider, useForm } 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 { useLokaliseTranslation } from 'src/utils/i18n';

interface ConsiderationsFormValues {
  considerations: string;
}

interface Props {
  open: boolean;
  initialValue?: string;
  isSaving?: boolean;
  onClose: () => void;
  onConfirm: (considerations: string) => void;
}

const ConsiderationsDrawer = ({
  open,
  initialValue,
  isSaving,
  onClose,
  onConfirm,
}: Props) => {
  const { t } = useLokaliseTranslation(['sportsPool', 'general']);
  const { palette } = useTheme();
  const isEditing = !!initialValue;

  const form = useForm<ConsiderationsFormValues>({
    defaultValues: { considerations: initialValue ?? '' },
    mode: 'onChange',
  });

  const {
    formState: { isValid },
  } = form;

  // biome-ignore lint/correctness/useExhaustiveDependencies: form.reset is stable
  useEffect(() => {
    if (open) {
      form.reset({ considerations: initialValue ?? '' });
    }
  }, [open, initialValue]);

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

  const handleSubmit = form.handleSubmit(values => {
    onConfirm(values.considerations);
  });

  return (
    <HuDrawer
      open={open}
      onClose={handleClose}
      title={
        isEditing
          ? t('admin.considerations.edit')
          : t('admin.considerations.add')
      }
      primaryButtonProps={{
        children: isEditing ? t('general:save_changes') : t('general:add'),
        onClick: handleSubmit,
        disabled: !isValid || isSaving,
        loading: isSaving,
        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="considerations"
              inputProps={{
                label: t('admin.considerations.label'),
                placeholder: t('admin.considerations.placeholder'),
                multiline: true,
                hasCounter: true,
                maxLength: 30000,
              }}
              rules={{ required: true }}
            />
          </Stack>
        </Stack>
      </FormProvider>
    </HuDrawer>
  );
};

export default ConsiderationsDrawer;