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';

import { type UpdateCompetitionPayload } from '../../types';

interface FormValues {
  name: string;
}

interface Props {
  open: boolean;
  initialValues?: FormValues;
  isSaving?: boolean;
  onClose: () => void;
  onConfirm: (values: UpdateCompetitionPayload) => void;
}

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

  const form = useForm<FormValues>({
    defaultValues: initialValues ?? { name: '' },
    mode: 'onChange',
  });

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

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

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

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

  return (
    <HuDrawer
      open={open}
      onClose={handleClose}
      title={t('admin.detail.edit_competition')}
      primaryButtonProps={{
        children: t('general:save_changes'),
        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="name"
              inputProps={{
                label: t('admin.basic_info.name_label'),
                hasCounter: false,
                showClear: false,
              }}
              rules={{ required: true }}
            />
          </Stack>
        </Stack>
      </FormProvider>
    </HuDrawer>
  );
};

export default EditCompetitionDrawer;