import React, { useEffect, useState } from "react";
import RenameInput from "../../../ui/inputs/RenameInput";
import Vector3Input from "../customInput/Vector3Input";
import { useSelectedZoneStore } from "../../../../store/useZoneStore";

const ZoneProperties: React.FC = () => {
  const [Edit, setEdit] = useState(false);
  const { selectedZone, setSelectedZone } = useSelectedZoneStore();

  function handleSetView() {
    setEdit(false);
  }

  function handleEditView() {
    if (Edit) {
      setEdit(false);
    } else {
      setEdit(true);
    }
  }
  useEffect(() => {

    console.log(' selectedZone.zoneName: ', selectedZone.zoneName);
  }, [selectedZone])

  return (
    <div className="zone-properties-container">
      <div className="header">
        <RenameInput value={selectedZone.zoneName ? selectedZone.zoneName : ""} />
        <div className="button" onClick={handleEditView}>
          {Edit ? "Cancel" : "Edit"}
        </div>
      </div>
      <Vector3Input onChange={() => { }} header="Viewport Target" />
      <Vector3Input onChange={() => { }} header="Viewport Position" />
      {Edit && (
        <div className="button-save" onClick={handleSetView}>
          Set View
        </div>
      )}
    </div>
  );
};

export default ZoneProperties;