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 Button from '@material-hu/components/design-system/Buttons/Button';
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 PrizeFormValues {
  name: string;
  description: string;
  positionCaption: string;
}

interface Props {
  open: boolean;
  positionIndex: number;
  initialValues?: PrizeFormValues;
  isSaving?: boolean;
  onClose: () => void;
  onConfirm: (prize: PrizeFormValues) => void;
  onDelete?: () => void;
}

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

  const captions = [
    t('admin.prize_drawer.first_place'),
    t('admin.prize_drawer.second_place'),
    t('admin.prize_drawer.third_place'),
  ];
  const defaultCaption =
    captions[positionIndex] ??
    t('admin.prize_drawer.nth_place', { position: positionIndex + 1 });

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

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

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

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

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

  return (
    <HuDrawer
      open={open}
      onClose={handleClose}
      title={
        isEditing
          ? t('admin.prize_drawer.edit_title')
          : t('admin.prize_drawer.add_title')
      }
      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="name"
              inputProps={{
                label: t('admin.prize_drawer.name_label'),
                placeholder: t('admin.prize_drawer.name_placeholder'),
                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('admin.prize_drawer.description_label'),
                placeholder: t('admin.prize_drawer.description_placeholder'),
                multiline: true,
                hasCounter: false,
                maxLength: 500,
              }}
              rules={{ required: false }}
            />
          </Stack>

          <Stack
            sx={{
              p: 2,
              backgroundColor: palette.new.background.layout.default,
              borderRadius: 2,
            }}
          >
            <HuFormInputClassic
              name="positionCaption"
              inputProps={{
                label: t('admin.prize_drawer.position_label'),
                placeholder: defaultCaption,
                hasCounter: false,
                showClear: false,
              }}
              rules={{ required: false }}
            />
          </Stack>

          {onDelete && (
            <Button
              variant="secondary"
              color="error"
              fullWidth
              onClick={onDelete}
              disabled={isSaving}
            >
              {t('admin.prize_drawer.delete')}
            </Button>
          )}
        </Stack>
      </FormProvider>
    </HuDrawer>
  );
};

export default AddPrizeDrawer;