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()
  const [hoveredIndex, setHoveredIndex] = useState<any>(null);
  const [isPlaying, setIsplaying] = useState(false);
  // 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) {
      setCurrentAnimation(selectedFloorItem.uuid, animation, true);
    }
  }

  if (!selectedFloorItem) return null;

  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", outline: "1px solid var(--border-color)" }}>
        {selectedFloorItem.uuid && <div style={{ display: "flex", alignItems: "center", justifyContent: "center" }}>Animations</div>}
        {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}
                  style={{ gap: "15px", cursor: "pointer", padding: "5px" }}
                >
                  <div
                    onClick={() => handleAnimationClick(animation)}
                    onMouseEnter={() => setHoveredIndex(index)}
                    onMouseLeave={() => setHoveredIndex(null)}
                    style={{
                      height: "20px",
                      width: "100%",
                      borderRadius: "5px",
                      background:
                        hoveredIndex === index
                          ? "#7b4cd3"
                          : "transparent",
                    }}
                  >
                    {animation.charAt(0).toUpperCase() +
                      animation.slice(1).toLowerCase()}
                  </div>
                </div>
              ))}
          </div>
        ))}
      </div>
    </div>
  );
};

export default AssetProperties;