import * as THREE from "three";
import * as Types from "../../../types/world/worldTypes";
import * as CONSTANTS from "../../../types/world/worldConstants";
import { Base } from "@react-three/csg";
import { MeshDiscardMaterial } from "@react-three/drei";
import { useUpdateScene, useWalls } from "../../../store/store";
import React, { useEffect } from "react";
import { getLines } from "../../../services/factoryBuilder/lines/getLinesApi";
import objectLinesToArray from "../geomentries/lines/lineConvertions/objectLinesToArray";
import loadWalls from "../geomentries/walls/loadWalls";
// texture
import texturePath from "../../../assets/textures/floor/wall-tex.png";

// Cache for materials
const materialCache = new Map<string, THREE.Material>();

const WallsMeshComponent = ({ lines }: any) => {
  const { walls, setWalls } = useWalls();
  const { updateScene, setUpdateScene } = useUpdateScene();

  useEffect(() => {
    if (updateScene) {
      const email = localStorage.getItem("email");
      const organization = email!.split("@")[1].split(".")[0];

      getLines(organization).then((data) => {
        const Lines: Types.Lines = objectLinesToArray(data);
        localStorage.setItem("Lines", JSON.stringify(Lines));

        if (Lines) {
          loadWalls(lines, setWalls);
        }
      });
      setUpdateScene(false);
    }
  }, [updateScene]);

  const textureLoader = new THREE.TextureLoader();
  const wallTexture = textureLoader.load(texturePath);

  wallTexture.wrapS = wallTexture.wrapT = THREE.RepeatWrapping;
  wallTexture.repeat.set(0.1, 0.1);
  wallTexture.colorSpace = THREE.SRGBColorSpace;

  return (
    <>
      {walls.map((wall: Types.Wall, index: number) => (
        <mesh key={index} renderOrder={1}>
          <Base
            name={`Wall${index + 1}`}
            geometry={wall[0]}
            rotation={wall[1]}
            position={wall[2]}
            userData={{ WallType: wall[3], Layer: wall[4] }}
          >
            <meshStandardMaterial
              side={THREE.DoubleSide}
              color={CONSTANTS.wallConfig.defaultColor}
              map={wallTexture}
            />
          </Base>
          <mesh
            castShadow
            geometry={wall[0]}
            rotation={wall[1]}
            position={wall[2]}
            name={`WallRaycastReference_${index + 1}`}
          >
            <MeshDiscardMaterial />
          </mesh>
        </mesh>
      ))}
    </>
  );
};

const WallsMesh = React.memo(WallsMeshComponent);
export default WallsMesh;