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

import FormCoverPictureUploader from '@composed-components/CoverPictureUploader/form';
import { type GetDrawerConfiguration, useDrawerV2 } from '@hooks/useDrawerV2';

import {
  type CoverPictureData,
  type CoverPictureDrawerProps,
  type UseCoverPictureDrawerProps,
} from './types';

/** Provides a drawer for uploading and cropping a cover picture. */
export const useCoverPictureDrawer = ({
  defaultSrc: src = null,
  loading = false,
}: UseCoverPictureDrawerProps = {}) => {
  const { t } = useTranslation('material_hu_only');
  const form = useForm<CoverPictureData>({
    values: { coverPicture: { cropped: src, original: src } },
    defaultValues: { coverPicture: { cropped: src, original: src } },
  });

  const { handleSubmit, reset } = form;

  const getDrawerConfiguration: GetDrawerConfiguration<
    CoverPictureDrawerProps
  > = ({ onConfirm, onCancel, defaultSrc, slotProps, ...props }) => {
    const submit = handleSubmit((values: CoverPictureData) => {
      onConfirm?.(values);
    });

    const handleClose = () => {
      closeCoverPictureDrawer();
    };

    const handleCancel = () => {
      onCancel?.();
      handleClose();
      reset({ coverPicture: { cropped: src, original: src } });
    };

    return {
      ...props,
      component: 'form',
      onSubmit: submit,
      onClose: handleClose,
      title: t('use_cover_picture_drawer.change_cover'),
      primaryButtonProps: {
        children: t('use_cover_picture_drawer.save'),
        loading,
        disabled: loading,
        type: 'submit',
      },
      secondaryButtonProps: {
        children: t('use_cover_picture_drawer.cancel'),
        disabled: loading,
        onClick: handleCancel,
      },
      children: (
        <FormCoverPictureUploader
          name="coverPicture"
          uploaderProps={{
            label: t('use_cover_picture_drawer.preview'),
            defaultSrc,
            sx: {
              ...slotProps?.uploader?.sx,
              '& img': { maxWidth: '100%' },
              '& .HuCoverPictureUploader-image': { px: 0 },
            },
            ...slotProps?.uploader,
          }}
        />
      ),
    };
  };

  const {
    drawer: coverPictureDrawer,
    showDrawer: showCoverPictureDrawer,
    closeDrawer: closeCoverPictureDrawer,
  } = useDrawerV2<CoverPictureDrawerProps>(getDrawerConfiguration);

  return {
    coverPictureDrawer: (
      <FormProvider {...form}>{coverPictureDrawer}</FormProvider>
    ),
    showCoverPictureDrawer: showCoverPictureDrawer,
    closeCoverPictureDrawer: closeCoverPictureDrawer,
  };
};

export default useCoverPictureDrawer;