import PolygonGenerator from "./polygonGenerator";
import { useThree } from "@react-three/fiber";
import { useEffect, useRef, useState } from "react";
import * as THREE from "three";
import * as Types from "../../../types/world/worldTypes";
import PathNavigator from "./pathNavigator";
import NavMeshDetails from "./navMeshDetails";

const Agv = ({
  lines,
  plane,
}: {
  lines: Types.RefLines;
  plane: Types.RefMesh;
}) => {
  let pathPoints = [
    [
      { x: 8.477161935339709, y: 0, z: 17.41343083550102 },
      { x: 9.175416491482693, y: 0, z: -12.361001232663693 },
    ],
    ,
    // [
    //   { x: 13.508213355232144, y: 0, z: -15.456970649652018 },
    //   { x: -30.464866520869617, y: 0, z: 9.779806557688929 },
    // ],
    [
      { x: 16.792040856420844, y: 0, z: 15.86281907549489 },
      { x: -42.77173264503395, y: 0, z: -15.821322764400804 },
    ],
  ];
  let groupRef = useRef() as Types.RefGroup;
  const [navMesh, setNavMesh] = useState();

  return (
    <>
      <PolygonGenerator groupRef={groupRef} lines={lines} plane={plane} />
      <NavMeshDetails
        lines={lines}
        setNavMesh={setNavMesh}
        groupRef={groupRef}
        plane={plane}
      />
      {pathPoints.map((pair, i) => (
        <PathNavigator navMesh={navMesh} selectedPoints={pair} key={i} />
      ))}
      <group ref={groupRef} visible={false} name="Meshes"></group>
    </>
  );
};

export default Agv;