/*
Auto-generated by: https://github.com/pmndrs/gltfjsx
Command: npx gltfjsx@6.5.3 Ninth.glb 
*/

import React, { useEffect, useState, useMemo } from "react";
import { useGLTFWithKTX2 } from "../utils/useGLTFWithKTX2";
import { convertMaterialsToBasic } from "../utils/convertToBasic";
import * as THREE from "three";
import { useModalStore } from "../../stores/useModalStore";
import { playSound } from "../../utils/audioSystem.js";

export default function Model({ progress = 0, pulseIntensity = 0, ...props }) {
  const { nodes, materials } = useGLTFWithKTX2("/models/Ninth.glb");
  const [hoveredMesh, setHoveredMesh] = useState(null);
  const { openModal, setModalID, isModalOpen } = useModalStore();

  const newMaterials = useMemo(
    () => convertMaterialsToBasic(materials),
    [materials]
  );

  const derivedMaterials = useMemo(() => {
    const baseMaterial = newMaterials["Ninth_real_actual_Baked"].clone();

    const brightHoveredMaterial =
      newMaterials["Ninth_real_actual_Baked"].clone();
    brightHoveredMaterial.color = new THREE.Color(2.5, 2.5, 2.5);

    const pulsingMaterial = newMaterials["Ninth_real_actual_Baked"].clone();

    return {
      baseMaterial,
      brightHoveredMaterial,
      pulsingMaterial,
    };
  }, [newMaterials]);

  const getMaterial = useMemo(
    () => (elementID, progressRange) => {
      if (
        hoveredMesh === elementID &&
        progress >= 0.399 &&
        progress <= 0.6 &&
        !isModalOpen
      )
        return derivedMaterials.brightHoveredMaterial;

      const [min, max] = progressRange;
      if (progress >= min && progress <= max) {
        const pulseColor = 1 + pulseIntensity * 1.5;
        derivedMaterials.pulsingMaterial.color.setRGB(
          pulseColor,
          pulseColor,
          pulseColor
        );
        return derivedMaterials.pulsingMaterial;
      }
      return derivedMaterials.baseMaterial;
    },
    [hoveredMesh, progress, pulseIntensity, isModalOpen, derivedMaterials]
  );

  useEffect(() => {
    if (progress <= 0.399 || progress >= 0.6 || isModalOpen) return;
    document.body.style.cursor = hoveredMesh ? "pointer" : "auto";

    return () => {
      document.body.style.cursor = "auto";
    };
  }, [hoveredMesh, progress, isModalOpen]);

  const handleClick = useMemo(
    () => (elementID) => {
      if (progress <= 0.399 || progress >= 0.6 || isModalOpen) return;
      openModal();
      setModalID(elementID);
      playSound("thumpHover");
    },
    [progress, isModalOpen, openModal, setModalID]
  );

  const handlePointerOver = useMemo(
    () => (meshId) => {
      setHoveredMesh(meshId);
      if (progress <= 0.399 || progress >= 0.6 || isModalOpen) return;
      playSound("thumpHover");
    },
    [isModalOpen, progress]
  );

  const meshes = useMemo(
    () => [
      {
        id: "demoshub",
        geometry: nodes.Ninth_DemosHub_Baked.geometry,
        progressRange: [0.399, 0.6],
        position: [6.136, 9.285, -48.469],
        rotation: [Math.PI / 2, 0, 0],
      },
      {
        id: "thecollective",
        geometry: nodes.Ninth_TheCollective_Baked.geometry,
        progressRange: [0.399, 0.6],
        position: [-0.457, 9.285, -48.469],
        rotation: [Math.PI / 2, 0, 0],
      },
      {
        id: "webzibition",
        geometry: nodes.Ninth_Webzibition_Baked.geometry,
        progressRange: [0.399, 0.6],
        position: [2.778, 9.285, -48.469],
        rotation: [Math.PI / 2, 0, 0],
      },
      {
        id: "developerspotlight",
        geometry: nodes.Ninth_DeveloperSpotlight_Baked.geometry,
        progressRange: [0.399, 0.6],
        position: [12.806, 9.285, -48.469],
        rotation: [Math.PI / 2, 0, 0],
      },
      {
        id: "designerspotlight",
        geometry: nodes.Ninth_DesignerSpotlight_Baked.geometry,
        progressRange: [0.399, 0.6],
        position: [9.538, 9.285, -48.469],
        rotation: [Math.PI / 2, 0, 0],
      },
    ],
    [nodes]
  );

  return (
    <group {...props} dispose={null}>
      {meshes.map((mesh) => (
        <mesh
          key={mesh.id}
          geometry={mesh.geometry}
          material={getMaterial(mesh.id, mesh.progressRange)}
          onPointerOver={() => handlePointerOver(mesh.id)}
          onPointerOut={() => setHoveredMesh(null)}
          onClick={() => handleClick(mesh.id)}
          position={mesh.position}
          rotation={mesh.rotation}
        />
      ))}
      <mesh
        geometry={nodes.Ninth_Paper_Baked.geometry}
        material={newMaterials["Ninth_real_actual_Baked"]}
        position={[6.122, 6.808, -35.966]}
      />
    </group>
  );
}