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"; 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]) function handleSetView() { console.log("setApi"); console.log('zoneTarget: ', zoneTarget); console.log('zonePosition: ', zonePosition); setEdit(false); } 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(() => { console.log("Updated selectedZone: ", selectedZone); }, [selectedZone]); return (