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 = () => {
    };

    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
                        onChange={() => { }}
                        value1={parseFloat(objectPosition.x.toFixed(5))}
                        value2={parseFloat(objectPosition.z.toFixed(5))}
                    />
                }
                {objectRotation &&
                    <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)}
                        />
                        <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;