import React, { useRef } from 'react';
import { ImagePlus } from 'lucide-react';
import { Editor } from '@tiptap/react';
import { imageResolutions } from '../../config/imageResolutions';
import axios from 'axios';

interface TipTapImageUploadButtonProps {
  editor: Editor;
  articleId: string;
}

const TipTapImageUploadButton: React.FC<TipTapImageUploadButtonProps> = ({ editor, articleId }) => {
  const fileInputRef = useRef<HTMLInputElement>(null);

  if (!editor) {
    return null;
  }

  const handleFileChange = async (event: React.ChangeEvent<HTMLInputElement>) => {
    const file = event.target.files?.[0];
    if (!file) return;

    try {
      const resolution = imageResolutions.find((r) => r.id === 'large');
      if (!resolution) throw new Error('Недопустимое значение разрешения');

      const formData = new FormData();
      formData.append('file', file);
      formData.append('resolutionId', resolution.id);
      formData.append('folder', `articles/${articleId}`);

      const response = await axios.post('/api/images/upload-url', formData, {
        headers: {
          'Content-Type': 'multipart/form-data',
          Authorization: `Bearer ${localStorage.getItem('token')}`,
        },
      });

      const imageUrl = response.data?.fileUrl;
      if (imageUrl) {
        editor
            .chain()
            .focus()
            .command(({ tr, dispatch }) => {
              const node = editor.schema.nodes.customImage.create({
                src: imageUrl,
                alt: file.name,
                scale: 1, // Начальный масштаб
              });
              if (dispatch) {
                tr.insert(editor.state.selection.anchor, node);
                dispatch(tr);
              }
              return true;
            })
            .run();
      } else {
        throw new Error('Сервер не вернул URL файла изображения');
      }
    } catch (error) {
      console.error('Сбой загрузки изображения:', error);
      alert('Не удалось загрузить изображение. Проверьте консоль для деталей.');
    }

    if (fileInputRef.current) {
      fileInputRef.current.value = '';
    }
  };

  const handleButtonClick = () => {
    fileInputRef.current?.click();
  };

  return (
      <div className="relative inline-block">
        <button
            type="button"
            onClick={handleButtonClick}
            className="p-1 rounded hover:bg-gray-200"
            title="Вставить изображение"
        >
          <ImagePlus size={18} />
        </button>
        <input
            ref={fileInputRef}
            type="file"
            accept="image/*"
            onChange={handleFileChange}
            className="hidden"
        />
      </div>
  );
};

export default TipTapImageUploadButton;