import { useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';

import { useModal } from '../../../../../../hooks/useModal';
import Dialog from '../../../../Dialog';
import { type FileCardType } from '../../../../FileCard/types';
import Uploader from '../../../../Uploader';
import { type UploaderProps } from '../../../../Uploader/types';
import useTextAreaModal from '../../hooks/useTextAreaModal';
import { insertImageWithLoader } from '../../utils';

export type InsertImageModalProps = {
  open: boolean;
  onClose: () => void;
  uploaderProps: Omit<UploaderProps, 'onChange' | 'value'>;
};

const InsertImageModal = (props: InsertImageModalProps) => {
  const { open, onClose, uploaderProps } = props;
  const { editor, close } = useTextAreaModal({ onClose });
  const [files, setFiles] = useState<FileCardType[]>([]);
  const { t } = useTranslation('material_hu_only');

  const onCancel = () => {
    close();
    setFiles([]);
  };

  const onSubmit = () => {
    if (editor) {
      const file = files[0]?.file;
      const attachmentUrl = files[0]?.attachment?.url;

      if (!file && !attachmentUrl) {
        return;
      }

      const imageUrl = file
        ? URL.createObjectURL(file)
        : (attachmentUrl as string);

      insertImageWithLoader(editor, imageUrl);
    }

    close();
    setFiles([]);
  };

  // biome-ignore lint/correctness/useExhaustiveDependencies: <We dont want callbacks as deps>
  useEffect(() => {
    if (open) showModal();
    else closeModal();
  }, [open]);

  const { modal, showModal, closeModal } = useModal(
    Dialog,
    {
      onClose: close,
      maxWidth: 'sm',
      fullWidth: true,
    },
    {
      onClose: close,
      title: t('top_bar_rich_text_editor.insert_image'),
      body: (
        <Uploader
          onChange={setFiles}
          value={files}
          maxFiles={1}
          acceptedTypes={['image']}
          triggerOnChangeWhenUploading
          showUploadButtonOnMaxFiles={false}
          sx={{ width: '100%', ...uploaderProps.sx }}
          {...uploaderProps}
        />
      ),
      primaryButtonProps: {
        children: t('top_bar_rich_text_editor.confirm'),
        disabled: !['success', 'default'].includes(files[0]?.status),
        onClick: onSubmit,
      },
      secondaryButtonProps: {
        children: t('top_bar_rich_text_editor.cancel'),
        onClick: onCancel,
      },
    },
  );

  return modal;
};

export default InsertImageModal;