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";
import { useBuilderStore } from "../../../../store/builder/useBuilderStore";

interface UserData {
  id: number;
  label: string;
  value: string;
}

const AssetProperties: React.FC = () => {
  const [userData, setUserData] = useState<UserData[]>([]);
  const { selectedFloorItem } = useSelectedFloorItem();
  const { objectPosition } = useObjectPosition();
  const { objectRotation } = useObjectRotation();
  const { assetStore } = useSceneContext();
  const { assets, setCurrentAnimation } = assetStore();
  const { loopAnimation } = useBuilderStore();
  const [hoveredIndex, setHoveredIndex] = useState<any>(null);

  const handleAddUserData = () => {
    setUserData([]);
  };

  const handleUserDataChange = (id: number, newValue: string) => { };

  const handleRemoveUserData = (id: number) => { };

  const handleAnimationClick = (animation: string) => {
    if (selectedFloorItem) {
      setCurrentAnimation(
        selectedFloorItem.uuid,
        animation,
        true,
        loopAnimation,
        true
      );
    }
  };

  if (!selectedFloorItem) return null;

  return (
    <div className="asset-properties-container">
      {/* Name */}
      <div className="header">{selectedFloorItem.userData.modelName}</div>
      <section>
        {objectPosition && (
          <PositionInput
            disabled={true}
            onChange={() => { }}
            value1={parseFloat(objectPosition.x.toFixed(5))}
            value2={parseFloat(objectPosition.z.toFixed(5))}
          />
        )}
        {objectRotation && (
          <RotationInput
            disabled={true}
            onChange={() => { }}
            value={parseFloat(objectRotation.y.toFixed(5))}
          />
        )}
      </section>

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

      <section>
        <div className="header">User Data</div>
        {userData.map((data, i) => (
          <div className="input-container" key={i}>
            <InputWithDropDown
              key={data.id}
              label={data.label}
              value={data.value}
              editableLabel
              onChange={(newValue) => handleUserDataChange(data.id, newValue)}
            />
            <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 className="header">Animations</div>
      <section className="animations-lists">
        {assets.map((asset, i) => {
          if (asset.modelUuid !== selectedFloorItem.uuid || !asset.animations)
            return (
              i === 0 && (
                <div className="no-animation" key={i}>
                  Looks like there are no preset animations yet. Stay tuned for
                  future additions!
                </div>
              )
            );

          return asset.animations.map((animation, index) => (
            <div key={index} className="animations-list-wrapper">
              <div
                onClick={() => handleAnimationClick(animation)}
                onMouseEnter={() => setHoveredIndex(index)}
                onMouseLeave={() => setHoveredIndex(null)}
                className="animations-list"
                style={{
                  background:
                    hoveredIndex === index
                      ? "var(--background-color-button)"
                      : "var(--background-color)",
                  color:
                    hoveredIndex === index ? "var(--text-button-color)" : "",
                }}
              >
                {animation.charAt(0).toUpperCase() +
                  animation.slice(1).toLowerCase()}
              </div>
            </div>
          ));
        })}
      </section>
    </div>
  );
};

export default AssetProperties;