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

import { useModal } from '../../../../../../hooks/useModal';
import Dialog from '../../../../Dialog';
import InputClassic from '../../../../Inputs/Classic';
import useTextAreaModal from '../../hooks/useTextAreaModal';
import { isMediaActive, RESIZABLE_MEDIA_NODE } from '../../utils/mediaNode';

import { getEmbedUrl, getOriginalUrl } from './transformers';

type EmbedVideoModalProps = {
  open: boolean;
  onClose: () => void;
  transformer?: (url: string) => string;
};

const URL_MAX_LENGTH = 500;

const EmbedVideoModal = (props: EmbedVideoModalProps) => {
  const { open, onClose, transformer } = props;
  const { editor, close } = useTextAreaModal({ onClose });
  const [url, setUrl] = useState<string>('');

  const { t } = useTranslation('material_hu_only');

  const onCancel = () => {
    close();
    setUrl('');
  };

  const onSubmit = (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    event.stopPropagation();

    if (editor) {
      const transformedUrl = transformer ? transformer(url) : getEmbedUrl(url);

      if (isMediaActive(editor, 'iframe')) {
        editor
          .chain()
          .focus()
          .updateAttributes(RESIZABLE_MEDIA_NODE, { src: transformedUrl })
          .run();
      } else {
        editor.chain().focus().setIframe({ src: transformedUrl }).run();
      }
    }

    close();
    setUrl('');
  };

  // biome-ignore lint/correctness/useExhaustiveDependencies: <We dont want callbacks as deps>
  useEffect(() => {
    if (open) {
      if (isMediaActive(editor, 'iframe')) {
        const src = editor?.getAttributes(RESIZABLE_MEDIA_NODE).src ?? '';
        setUrl(getOriginalUrl(src));
      }
      showModal();
    } else {
      closeModal();
      setUrl('');
    }
  }, [open, editor]);

  const { modal, showModal, closeModal } = useModal(
    Dialog,
    {
      onClose: close,
      maxWidth: 'sm',
      fullWidth: true,
    },
    {
      onClose: close,
      title: t('top_bar_rich_text_editor.embed_video'),
      body: (
        <>
          <form
            onSubmit={onSubmit}
            onReset={onCancel}
            id="embed-video-modal"
          />
          <InputClassic
            fullWidth
            label={t('top_bar_rich_text_editor.url')}
            placeholder={t('top_bar_rich_text_editor.url_placeholder')}
            type="text"
            onChange={value => setUrl(value)}
            value={url}
            hasCounter={false}
            autoFocus
            maxLength={URL_MAX_LENGTH}
          />
        </>
      ),
      primaryButtonProps: {
        children: t('top_bar_rich_text_editor.confirm'),
        disabled: !url,
        type: 'submit',
        form: 'embed-video-modal',
      },
      secondaryButtonProps: {
        children: t('top_bar_rich_text_editor.cancel'),
        type: 'reset',
        form: 'embed-video-modal',
      },
    },
  );

  return modal;
};

export default EmbedVideoModal;