Dwinzo_Demo/app/src/components/layout/sidebarRight/properties/AssetProperties.tsx

import React, { 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, useObjectPosition, useObjectRotation } from "../../../../store/builder/store";
import { useSceneContext } from "../../../../modules/scene/sceneContext";

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();
  const { objectPosition } = useObjectPosition();
  const { objectRotation } = useObjectRotation();
  const { assetStore } = useSceneContext();
  const { assets, setCurrentAnimation } = assetStore()

  // 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)
    );
  };

  const handleAnimationClick = (animation: string) => {
    if (selectedFloorItem) {
      const isPlaying = selectedFloorItem.animationState?.playing || false;
      setCurrentAnimation(selectedFloorItem.uuid, animation, !isPlaying);
    }
  }
  return (
    <div className="asset-properties-container">
      {/* Name */}
      <div className="header">{selectedFloorItem.userData.modelName}</div>
      <section>
        {objectPosition.x && objectPosition.z &&
          <PositionInput
            onChange={() => { }}
            value1={parseFloat(objectPosition.x.toFixed(5))}
            value2={parseFloat(objectPosition.z.toFixed(5))}
          />
        }
        {objectRotation.y &&
          <RotationInput
            onChange={() => { }}
            value={parseFloat(objectRotation.y.toFixed(5))}
          />
        }
      </section>

      <section>
        <div className="header">Render settings</div>
        <InputToggle inputKey="visible" label="Visible" />
        <InputToggle inputKey="frustumCull" label="Frustum cull" />
      </section>

      <section>
        <div className="header">User Data</div>
        {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>
      </section>
      <div style={{ display: "flex", flexDirection: "column" }}>
        {assets.map((asset) => (
          <div key={asset.modelUuid} className="asset-item">
            {
              asset.modelUuid === selectedFloorItem.uuid &&
              asset.animations && asset.animations.length > 0
              && asset.animations.map((animation, index) => (
                <div key={index} className="animation-item" style={{ gap: "5px" }} onClick={() => { handleAnimationClick(animation) }}>
                  {animation}
                </div>
              ))
            }

          </div>
        ))}
      </div>
    </div>
  );
};

export default AssetProperties;