import React, { useEffect, useState } from "react";
import InputToggle from "../../../ui/inputs/InputToggle";
import InputWithDropDown from "../../../ui/inputs/InputWithDropDown";
import { RemoveIcon } from "../../../icons/ExportCommonIcons";
import PositionInput from "../customInput/PositionInputs";
import RotationInput from "../customInput/RotationInput";
import { useselectedFloorItem } from "../../../../store/store";
import * as THREE from "three";

interface UserData {
  id: number; // Unique identifier for the user data
  label: string; // Label of the user data field
  value: string; // Value of the user data field
}

const AssetProperties: React.FC = () => {
  const [userData, setUserData] = useState<UserData[]>([]); // State to track user data
  const [nextId, setNextId] = useState(1); // Unique ID for new entries
  const { selectedFloorItem } = useselectedFloorItem();
  // Function to handle adding new user data
  const handleAddUserData = () => {
    const newUserData: UserData = {
      id: nextId,
      label: `Property ${nextId}`,
      value: "",
    };
    setUserData([...userData, newUserData]);
    setNextId(nextId + 1); // Increment the ID for the next entry
  };

  // Function to update the value of a user data entry
  const handleUserDataChange = (id: number, newValue: string) => {
    setUserData((prevUserData) =>
      prevUserData.map((data) =>
        data.id === id ? { ...data, value: newValue } : data
      )
    );
  };

  // Remove user data
  const handleRemoveUserData = (id: number) => {
    setUserData((prevUserData) =>
      prevUserData.filter((data) => data.id !== id)
    );
  };

  return (
    <div className="asset-properties-container">
      {/* Name */}
      <div className="header">{selectedFloorItem.userData.name}</div>

      <PositionInput
        onChange={() => {}}
        value1={selectedFloorItem.position.x.toFixed(5)}
        value2={selectedFloorItem.position.z.toFixed(5)}
      />
      <RotationInput
        onChange={() => {}}
        value={parseFloat(
          THREE.MathUtils.radToDeg(selectedFloorItem.rotation.y).toFixed(5)
        )}
      />

      <div className="split"></div>

      <InputToggle inputKey="visible" label="Visible" />
      <InputToggle inputKey="frustumCull" label="Frustum cull" />

      <div className="header">User Data</div>

      {/* Map through userData and render InputWithDropDown for each entry */}
      {userData.map((data) => (
        <div className="input-container">
          <InputWithDropDown
            key={data.id}
            label={data.label}
            value={data.value}
            editableLabel
            onChange={(newValue) => handleUserDataChange(data.id, newValue)} // Pass the change handler
          />
          <div
            className="remove-button"
            onClick={() => handleRemoveUserData(data.id)}
          >
            <RemoveIcon />
          </div>
        </div>
      ))}

      {/* Add new user data */}
      <div className="optimize-button" onClick={handleAddUserData}>
        + Add
      </div>
    </div>
  );
};

export default AssetProperties;