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/builder/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";
import texturePath from "../../../assets/textures/floor/factory wall texture.jpg";
import { useParams } from "react-router-dom";
import { getUserData } from "../../../functions/getUserData";
import { useVersionContext } from "../version/versionContext";

const WallsMeshComponent = ({ lines }: any) => {
    const { walls, setWalls } = useWalls();
    const { updateScene, setUpdateScene } = useUpdateScene();
    const { projectId } = useParams();
    const { selectedVersionStore } = useVersionContext();
    const { selectedVersion } = selectedVersionStore();
    const { organization } = getUserData();

    useEffect(() => {
        if (updateScene) {
            if (!selectedVersion) {
                setUpdateScene(false);
                return;
            };
            getLines(organization, projectId, selectedVersion?.versionId || '').then((data) => {
                const Lines: Types.Lines = objectLinesToArray(data);
                localStorage.setItem("Lines", JSON.stringify(Lines));

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

    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;