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

import defaultTexture from '../../../../assets/textures/floor/white.png';
import flootTexture1 from '../../../../assets/textures/floor/factory wall texture.jpg';
import flootTexture2 from '../../../../assets/textures/floor/tex1/MI_FactoryConcreteFloor01_BaseColor.001.jpg';
import flootTexture3 from '../../../../assets/textures/floor/tex2/MI_FloorMats01_baseColor.png';
import flootTexture4 from '../../../../assets/textures/floor/tex3/metal_plate_diff_1k.jpg';

import { useBuilderStore } from "../../../../store/builder/useBuilderStore";

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

export const materials = [
    { texture: defaultTexture, textureId: "Default Material", textureName: "Default Material" },
    { texture: flootTexture1, textureId: "Material 1", textureName: "Grunge Concrete Wall" },
    { texture: flootTexture2, textureId: "Material 2", textureName: "Tiled Floor" },
    { texture: flootTexture3, textureId: "Material 3", textureName: "Metal Floor" },
    { texture: flootTexture4, textureId: "Material 4", textureName: "Metal Floor 2" },
];

const FloorProperties = () => {
    const { floorDepth, isBeveled, topMaterial, sideMaterial, bevelStrength, setFloorDepth, setIsBeveled, setBevelStrength, setFloorMaterial } = useBuilderStore();

    const [activeSurface, setActiveSurface] = useState<"top" | "side">("top");

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

    useEffect(() => {
        setSelectedMaterials({
            top: materials.find((mat) => mat.textureId === topMaterial) || null,
            side: materials.find((mat) => mat.textureId === sideMaterial) || null,
        });
    }, [sideMaterial, topMaterial]);

    const handleDepthChange = (val: string) => {
        setFloorDepth(parseFloat(val));
    };

    const handleIsBevelChange = (val: boolean) => {
        setIsBeveled(val);
    };

    const handleBevelChange = (val: string) => {
        setBevelStrength(parseFloat(val));
    };

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

    return (
        <div className="wall-properties-container">
            <section className="wall-properties-section">
                <div className="header">Floor</div>
                <div className="wall-properties">
                    <InputWithDropDown
                        label="Depth"
                        value={`${floorDepth}`}
                        min={0.1}
                        max={10}
                        step={0.1}
                        onChange={handleDepthChange}
                    />
                    <InputToggle
                        value={isBeveled}
                        label="Beveled"
                        inputKey=""
                        onClick={() => handleIsBevelChange(!isBeveled)}
                    />
                    <InputWithDropDown
                        label="Bevel Strength"
                        value={`${bevelStrength}`}
                        min={1}
                        max={10}
                        step={1}
                        onChange={handleBevelChange}
                    />
                </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 ${activeSurface === "top" ? "active" : ""}`}
                            onClick={() => setActiveSurface("top")}
                        >
                            <div className="label">Top</div>
                            <div className="texture-image">
                                {selectedMaterials.top && (
                                    <img
                                        draggable={false}
                                        src={selectedMaterials.top.texture}
                                        alt={selectedMaterials.top.textureName}
                                    />
                                )}
                            </div>
                        </button>

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

                    <div className="preview">
                        {selectedMaterials[activeSurface] && (
                            <img
                                draggable={false}
                                src={selectedMaterials[activeSurface]!.texture}
                                alt={selectedMaterials[activeSurface]!.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[activeSurface]?.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 FloorProperties;
