import { useState } from "react";
import InputWithDropDown from "../../../ui/inputs/InputWithDropDown";

import defaultTexture from '../../../../assets/textures/floor/wall-tex.png';
import wallTexture1 from '../../../../assets/textures/floor/factory wall texture.jpg';

import { useBuilderStore } from "../../../../store/builder/useBuilderStore";
import { useSceneContext } from "../../../../modules/scene/sceneContext";

const SelectedWallProperties = () => {
    const { selectedWall } = useBuilderStore();
    const { wallStore } = useSceneContext();
    const { getWallById, updateWall } = wallStore();

    const [activeSide, setActiveSide] = useState<"side1" | "side2">("side1");

    const materials = [
        { texture: defaultTexture, textureId: "Default Material", textureName: "Default Material" },
        { texture: wallTexture1, textureId: "Material 1", textureName: "Grunge Concrete Wall" }
    ];

    const wall = selectedWall ? getWallById(selectedWall.userData.wallUuid) : null;

    const handleHeightChange = (val: string) => {
        const height = parseFloat(val);
        if (!isNaN(height) && wall) {
            updateWall(wall.wallUuid, { wallHeight: height });
        }
    };

    const handleThicknessChange = (val: string) => {
        const thickness = parseFloat(val);
        if (!isNaN(thickness) && wall) {
            updateWall(wall.wallUuid, { wallThickness: thickness });
        }
    };

    const handleSelectMaterial = (material: { textureId: string; textureName: string }) => {
        if (!wall) return;

        const updated = (activeSide === "side1" ? { insideMaterial: material.textureId } : { outsideMaterial: material.textureId })

        updateWall(wall.wallUuid, updated);
    };

    if (!wall) return null;

    const selectedMaterials = {
        side1: {
            texture: materials.find((material) => material.textureId === wall.insideMaterial)?.texture || 'Unknown',
            textureId: materials.find((material) => material.textureId === wall.insideMaterial)?.textureId || 'Unknown',
            textureName: materials.find((material) => material.textureId === wall.insideMaterial)?.textureName || 'Unknown'
        },
        side2: {
            texture: materials.find((material) => material.textureId === wall.outsideMaterial)?.texture || 'Unknown',
            textureId: materials.find((material) => material.textureId === wall.outsideMaterial)?.textureId || 'Unknown',
            textureName: materials.find((material) => material.textureId === wall.outsideMaterial)?.textureName || 'Unknown'
        }
    };

    return (
        <div className="wall-properties-container">
            <section className="wall-properties-section">
                <div className="header">Wall</div>
                <div className="wall-properties">
                    <InputWithDropDown
                        label="Height"
                        value={`${wall.wallHeight}`}
                        onChange={handleHeightChange}
                    />
                    <InputWithDropDown
                        label="Thickness"
                        value={`${wall.wallThickness}`}
                        onChange={handleThicknessChange}
                    />
                </div>
            </section>
            <section>
                <div className="header-wrapper">
                    <div className="header">Materials</div>
                </div>

                <div className="material-preview">
                    <div className="sides-wrapper">
                        {(["side1", "side2"] as const).map((side) => (
                            <button
                                key={side}
                                className={`side-wrapper ${activeSide === side ? "active" : ""}`}
                                onClick={() => setActiveSide(side)}
                            >
                                <div className="label">Side {side === "side1" ? 1 : 2}</div>
                                <div className="texture-image">
                                    <img
                                        draggable={false}
                                        src={selectedMaterials[side].texture}
                                        alt={selectedMaterials[side].textureName}
                                    />
                                </div>
                            </button>
                        ))}
                    </div>

                    <div className="preview">
                        <img
                            draggable={false}
                            src={selectedMaterials[activeSide].texture}
                            alt={selectedMaterials[activeSide].textureName}
                        />
                    </div>
                </div>

                <div className="materials">
                    <div className="material-container">
                        {materials.map((material, index) => {
                            const isSelected = selectedMaterials[activeSide].textureId === material.textureId;

                            return (
                                <button
                                    className={`material-wrapper ${isSelected ? "selectedMaterial" : ""}`}
                                    key={`${material.textureName}_${index}`}
                                    onClick={() => handleSelectMaterial(material)}
                                >
                                    <div className="material-property">
                                        <div className="material-image">
                                            <img
                                                draggable={false}
                                                src={material.texture}
                                                alt={material.textureName}
                                            />
                                        </div>
                                        <div className="material-name">{material.textureName}</div>
                                    </div>
                                </button>
                            );
                        })}
                    </div>
                </div>
            </section>
        </div>
    );
};

export default SelectedWallProperties;
