import React, { useEffect, useState } from "react";
import RenameInput from "../../../ui/inputs/RenameInput";
import Vector3Input from "../customInput/Vector3Input";
import { useSelectedZoneStore } from "../../../../store/useZoneStore";
import { useEditPosition, usezonePosition, usezoneTarget } from "../../../../store/store";
import { zoneCameraUpdate } from "../../../../services/realTimeVisulization/zoneData/zoneCameraUpdation";

const ZoneProperties: React.FC = () => {
  const { Edit, setEdit } = useEditPosition();
  const { selectedZone, setSelectedZone } = useSelectedZoneStore();
  const { zonePosition, setZonePosition } = usezonePosition();
  const { zoneTarget, setZoneTarget } = usezoneTarget();

  useEffect(() => {
    setZonePosition(selectedZone.zoneViewPortPosition)
    setZoneTarget(selectedZone.zoneViewPortTarget)
  }, [selectedZone?.zoneViewPortPosition, selectedZone?.zoneViewPortTarget])

  async function handleSetView() {
    try {
      const email = localStorage.getItem("email") || "";
      const organization = email?.split("@")[1]?.split(".")[0];
  
      let zonesdata = {
        zoneId: selectedZone.zoneId,
        viewPortposition: zonePosition,
        viewPortCenter: zoneTarget
      };
  
      let response = await zoneCameraUpdate(zonesdata, organization);
      console.log('response: ', response);
     
  
      setEdit(false);
    } catch (error) {
      console.error("Error in handleSetView:", error);
    }
  }

  function handleEditView() {
    setEdit(!Edit);  // This will toggle the `Edit` state correctly
  }

  function handleZoneNameChange(newName: string) {
    setSelectedZone((prev) => ({ ...prev, zoneName: newName }));
  }

  function handleVectorChange(key: "zoneViewPortTarget" | "zoneViewPortPosition", newValue: [number, number, number]) {
    setSelectedZone((prev) => ({ ...prev, [key]: newValue }));
  }

  useEffect(() => {

  }, [selectedZone]);

  return (
    <div className="zone-properties-container">
      <div className="header">
        <RenameInput value={selectedZone.zoneName} onRename={handleZoneNameChange} />
        <div className="button" onClick={handleEditView}>
          {Edit ? "Cancel" : "Edit"}
        </div>
      </div>
      <Vector3Input
        onChange={(value) => handleVectorChange("zoneViewPortTarget", value)}
        header="Viewport Target"
        value={zoneTarget as [number, number, number]}
        disabled={!Edit}
      />
      <Vector3Input
        onChange={(value) => handleVectorChange("zoneViewPortPosition", value)}
        header="Viewport Position"
        value={zonePosition as [number, number, number]}
        disabled={!Edit}
      />

      {Edit && (
        <div className="button-save" onClick={handleSetView}>
          Set View
        </div>
      )}
    </div>
  );
};

export default ZoneProperties;