import { useRoomsState, useToggleView } from "../../../store/builder/store";
import { computeArea } from "../functions/computeArea";
import { Html } from "@react-three/drei";
import * as CONSTANTS from "../../../types/world/worldConstants";
import * as turf from "@turf/turf";
import * as THREE from "three";

const CalculateAreaGroup = () => {
  const { roomsState } = useRoomsState();
  const { toggleView } = useToggleView();
  const savedTheme: string | null = localStorage.getItem("theme");

  return (
    <group name="roomArea" visible={toggleView}>
      <group name="roomFills" visible={toggleView}>
        {roomsState.length > 0 &&
          roomsState.flat().map((room: any, index: number) => {
            const coordinates = room.coordinates;
            if (!coordinates || coordinates.length < 3) return null;

            const coords2D = coordinates.map(
              (p: any) => new THREE.Vector2(p.position.x, p.position.z)
            );

            if (!coords2D[0].equals(coords2D[coords2D.length - 1])) {
              coords2D.push(coords2D[0]);
            }

            const shape = new THREE.Shape(coords2D);
            const extrudeSettings = {
              depth: 0.01,
              bevelEnabled: false,
            };

            const geometry = new THREE.ExtrudeGeometry(shape, extrudeSettings);
            geometry.rotateX(Math.PI / 2);

            const material = new THREE.MeshBasicMaterial({
              color: savedTheme === "dark" ? "#d2baff" : "#6f42c1",
              side: THREE.DoubleSide,
              transparent: true,
              opacity: 0.4,
              depthWrite: false,
            });

            return (
              <group key={`roomFill-${index}`}>
                <mesh
                  geometry={geometry}
                  material={material}
                  position={[0, 0.12, 0]}
                />
              </group>
            );
          })}
      </group>
      {roomsState.length > 0 &&
        roomsState.flat().map((room: any, index: number) => {
          if (!toggleView) return null;
          const coordinates = room.coordinates;

          if (!coordinates || coordinates.length < 3) return null;

          let coords2D = coordinates.map((p: any) => [
            p.position.x,
            p.position.z,
          ]);

          const first = coords2D[0];
          const last = coords2D[coords2D.length - 1];
          if (first[0] !== last[0] || first[1] !== last[1]) {
            coords2D.push(first);
          }

          const polygon = turf.polygon([coords2D]);
          const center2D = turf.center(polygon).geometry.coordinates;

          const sumY = coordinates.reduce(
            (sum: number, p: any) => sum + p.position.y,
            0
          );
          const avgY = sumY / coordinates.length;

          const area = computeArea(room, "rooms");
          const formattedArea = `${area.toFixed(2)} m²`;

          const htmlPosition: [number, number, number] = [
            center2D[0],
            avgY + CONSTANTS.zoneConfig.height,
            center2D[1],
          ];

          return (
            <Html
              key={`${index}-${room.layer || index}`}
              position={htmlPosition}
              wrapperClass="distance-text-wrapper"
              className="distance-text"
              zIndexRange={[1, 0]}
              prepend
              center
              sprite
            >
              <div className={`distance area line-${room.layer || index}`}>
                Room ({formattedArea})
              </div>
            </Html>
          );
        })}
    </group>
  );
};

export default CalculateAreaGroup;
