import { useEffect, useState } from "react";
import { Line } from "@react-three/drei";
import {
  useNavMesh,
  usePlayAgv,
  useSimulationStates,
} from "../../../store/store";
import PathNavigator from "./pathNavigator";
import { usePlayButtonStore } from "../../../store/usePlayButtonStore";

type PathPoints = {
  modelUuid: string;
  modelSpeed: number;
  bufferTime: number;
  points: { x: number; y: number; z: number }[];
  hitCount: number;
};
interface ProcessContainerProps {
  processes: any[];
  agvRef: any;
}

const Agv: React.FC<ProcessContainerProps> = ({ processes, agvRef }) => {
  const [pathPoints, setPathPoints] = useState<PathPoints[]>([]);
  const { simulationStates } = useSimulationStates();
  const { navMesh } = useNavMesh();
  const { isPlaying } = usePlayButtonStore();
  const { PlayAgv, setPlayAgv } = usePlayAgv();

  useEffect(() => {
    console.log("agvRef: ", agvRef);
  }, [agvRef]);

  useEffect(() => {
    if (simulationStates.length > 0) {
      const agvModels = simulationStates.filter(
        (val) => val.modelName === "agv" && val.type === "Vehicle"
      );

      const newPathPoints = agvModels
        .filter(
          (model: any) =>
            model.points &&
            model.points.actions &&
            typeof model.points.actions.start === "object" &&
            typeof model.points.actions.end === "object" &&
            "x" in model.points.actions.start &&
            "y" in model.points.actions.start &&
            "x" in model.points.actions.end &&
            "y" in model.points.actions.end
        )
        .map((model: any) => ({
          modelUuid: model.modeluuid,
          modelSpeed: model.points.speed,
          bufferTime: model.points.actions.buffer,
          hitCount: model.points.actions.hitCount,
          points: [
            {
              x: model.position[0],
              y: model.position[1],
              z: model.position[2],
            },
            {
              x: model.points.actions.start.x,
              y: 0,
              z: model.points.actions.start.y,
            },
            {
              x: model.points.actions.end.x,
              y: 0,
              z: model.points.actions.end.y,
            },
          ],
        }));

      setPathPoints(newPathPoints);
    }
  }, [simulationStates]);

  return (
    <>
      {pathPoints.map((pair, i) => (
        <group key={i} visible={!isPlaying}>
          <PathNavigator
            navMesh={navMesh}
            pathPoints={pair.points}
            id={pair.modelUuid}
            speed={pair.modelSpeed}
            bufferTime={pair.bufferTime}
            hitCount={pair.hitCount}
            processes={processes}
            agvRef={agvRef}
          />

          {pair.points.slice(1).map((point, idx) => (
            <mesh position={[point.x, point.y, point.z]} key={idx}>
              <sphereGeometry args={[0.3, 15, 15]} />
              <meshStandardMaterial color="red" />
            </mesh>
          ))}
        </group>
      ))}
    </>
  );
};

export default Agv;
