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

// Texture Imports

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";

// Define Material type
type Material = {
    texture: string;
    textureId: string;
    textureName: string;
};

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

const WallProperties = () => {
    const { wallHeight, wallThickness, insideMaterial, outsideMaterial, setWallHeight, setWallThickness } = useBuilderStore();

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

    const [selectedMaterials, setSelectedMaterials] = useState<{
        side1: Material | null;
        side2: Material | null;
    }>({
        side1: null,
        side2: null,
    });

    useEffect(() => {
        setSelectedMaterials({
            side1: materials.find((mat) => mat.textureId === outsideMaterial) || null,
            side2: materials.find((mat) => mat.textureId === insideMaterial) || null,
        });
    }, []);

    const handleHeightChange = (newValue: string) => {
        setWallHeight(parseFloat(newValue));
    };

    const handleThicknessChange = (newValue: string) => {
        setWallThickness(parseFloat(newValue));
    };

    const handleSelectMaterial = (material: Material) => {
        setSelectedMaterials((prev) => ({
            ...prev,
            [activeSide]: material,
        }));
    };

    return (
        <div className="wall-properties-container">
            <section className="wall-properties-section">
                <div className="header">Wall</div>
                <div className="wall-properties">
                    <InputWithDropDown
                        label="Height"
                        value={`${wallHeight}`}
                        min={1}
                        max={25}
                        step={1}
                        onChange={(val) => handleHeightChange(val)}
                    />
                    <InputWithDropDown
                        label="Thickness"
                        value={`${wallThickness}`}
                        min={0.1}
                        max={2}
                        step={0.1}
                        onChange={(val) => handleThicknessChange(val)}
                    />
                </div>
            </section>
            <section>
                <div className="header-wrapper">
                    <div className="header">Materials</div>
                </div>

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

                        <button
                            className={`side-wrapper ${activeSide === "side2" ? "active" : ""}`}
                            onClick={() => setActiveSide("side2")}
                        >
                            <div className="label">Side 2</div>
                            <div className="texture-image">
                                {selectedMaterials.side2 && (
                                    <img
                                        draggable={false}
                                        src={selectedMaterials.side2.texture}
                                        alt={selectedMaterials.side2.textureName}
                                    />
                                )}
                            </div>
                        </button>
                    </div>

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

                <div className="materials">
                    {materials.length === 0 ? (
                        <div className="no-materials">No materials added yet.</div>
                    ) : (
                        <div className="material-container">
                            {materials.map((material, index) => {
                                const isSelected = selectedMaterials[activeSide]?.texture === material.texture;

                                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 WallProperties;
