import { useFrame, useThree } from "@react-three/fiber";
import {
  useAddAction,
  useRoofVisibility,
  useToggleView,
  useWallVisibility,
  useUpdateScene,
  useRenameModeStore,
  useToolMode,
} from "../../../store/builder/store";
import hideRoof from "../geomentries/roofs/hideRoof";
import hideWalls from "../geomentries/walls/hideWalls";
import addAndUpdateReferencePillar from "../geomentries/pillars/addAndUpdateReferencePillar";
import { useEffect } from "react";
import addPillar from "../geomentries/pillars/addPillar";
import DeletePillar from "../geomentries/pillars/deletePillar";
import DeletableHoveredPillar from "../geomentries/pillars/deletableHoveredPillar";
import loadFloor from "../geomentries/floors/loadFloor";
import { useLeftData, useTopData } from "../../../store/visualization/useZone3DWidgetStore";

const FloorGroup = ({
  floorGroup,
  lines,
  referencePole,
  hoveredDeletablePillar,
}: any) => {
  const state = useThree();
  const { roofVisibility } = useRoofVisibility();
  const { wallVisibility } = useWallVisibility();
  const { toggleView } = useToggleView();
  const { scene, camera, raycaster, gl } = useThree();
  const { addAction } = useAddAction();
  const { toolMode } = useToolMode();
  const { updateScene, setUpdateScene } = useUpdateScene();
  const { setTop } = useTopData();
  const { setLeft } = useLeftData();
  const { isRenameMode, setIsRenameMode } = useRenameModeStore();

  useEffect(() => {
    if (updateScene) {
      loadFloor(lines, floorGroup);
      setUpdateScene(false);
    }
  }, [updateScene]);

  useEffect(() => {
    if (!addAction) {
      if (referencePole.current) {
        (referencePole.current as any).material.dispose();
        (referencePole.current.geometry as any).dispose();
        floorGroup.current.remove(referencePole.current);
        referencePole.current = undefined;
      }
    }
  }, [addAction]);

  useEffect(() => {
    const canvasElement = gl.domElement;
    let drag = false;
    let isLeftMouseDown = false;

    const onMouseDown = (evt: any) => {

      if (evt.button === 0) {
        isLeftMouseDown = true;
        drag = false;
      }
    };

    const onMouseUp = (evt: any) => {
      setIsRenameMode(false);
      if (evt.button === 0) {
        isLeftMouseDown = false;
        if (!drag) {
          if (addAction === "pillar") {
            addPillar(referencePole, floorGroup);
          }
          if (toolMode === '3D-Delete') {
            DeletePillar(hoveredDeletablePillar, floorGroup);
          }
        }
      }
    };

    const onMouseMove = (evt: any) => {
      if (!canvasElement) return;
      const canvasRect = canvasElement.getBoundingClientRect();
      const relativeX = evt.clientX - canvasRect.left;
      const relativeY = evt.clientY - canvasRect.top;
      if (!isRenameMode) {
        setTop(relativeY);
        setLeft(relativeX);
      }
      if (isLeftMouseDown) {
        drag = true;
      }
    };

    canvasElement.addEventListener("mousedown", onMouseDown);
    canvasElement.addEventListener("mouseup", onMouseUp);
    canvasElement.addEventListener("mousemove", onMouseMove);

    return () => {
      canvasElement.removeEventListener("mousedown", onMouseDown);
      canvasElement.removeEventListener("mouseup", onMouseUp);
      canvasElement.removeEventListener("mousemove", onMouseMove);
    };
  }, [toolMode, addAction, isRenameMode]);

  useFrame(() => {
    hideRoof(roofVisibility, floorGroup, camera);
    hideWalls(wallVisibility, scene, camera);

    if (addAction === "pillar") {
      addAndUpdateReferencePillar(raycaster, floorGroup, referencePole);
    }
    if (toolMode === '3D-Delete') {
      DeletableHoveredPillar(state, floorGroup, hoveredDeletablePillar);
    }
  });

  return (
    <group ref={floorGroup} visible={!toggleView} name="floorGroup"></group>
  );
};

export default FloorGroup;