import React, { useMemo, useState } from "react";
import { createPortal } from "react-dom";
import { ThreeView } from "./widgets/ThreeView";
import { ThreeViewErrorBoundary } from "./ThreeViewErrorBoundary";
import scale_plus from "../assets/fullscreen-modal-actions/scale_plus.png";
import scale_minus from "../assets/fullscreen-modal-actions/scale_minus.png";
import closeIcon from "../assets/fullscreen-modal-actions/close.png";

const Fullscreen3DModal = ({ isOpen, onClose, fileUrl }) => {
  if (!isOpen || !fileUrl) return null;

  const [scale, setScale] = useState(0.1);
  const [fullscreenResetKey, setFullscreenResetKey] = useState(0);

  const handleResetScale = (e) => {
    e.stopPropagation();
    setScale(0.1);
  };

  return createPortal(
    <div className="fullscreen-3d-modal">
      <div className="fullscreen-3d-content">
        <div className="fullscreen-3d-viewer">
          <ThreeViewErrorBoundary
            resetKey={`fullscreen-${fileUrl}-${fullscreenResetKey}`}
            onReset={() => {
              setFullscreenResetKey((prev) => prev + 1);
            }}
          >
            <ThreeView
              key={`fullscreen-${fileUrl}-${fullscreenResetKey}`}
              fileUrl={fileUrl}
              width={"100%"}
              height={"100%"}
            />
          </ThreeViewErrorBoundary>
        </div>
      </div>
      <div className="fullscreen-3d-actions">
        <button disabled={scale >= 1}>
          <img src={scale_plus} alt="Увеличить" />
        </button>
        <button disabled={scale <= 0.1}>
          <img src={scale_minus} alt="Уменьшить" />
        </button>

        <button onPointerUp={onClose}>
          <img src={closeIcon} alt="Закрыть" />
        </button>
      </div>
    </div>,
    document.body
  );
};

export default Fullscreen3DModal;
