import { useEffect, useState } from "react"; import InputWithDropDown from "../../../../ui/inputs/InputWithDropDown"; import { AddIcon, RemoveIcon } from "../../../../icons/ExportCommonIcons"; // Texture Imports import wallTexture1 from "../../../../../assets/image/wallTextures/wallTexture.png"; import defaultTexture from "../../../../../assets/image/wallTextures/defaultTexture.jpg"; import { useBuilderStore } from "../../../../../store/builder/useBuilderStore"; // Define Material type type Material = { texture: string; textureName: string; }; // Default and initial materials const defaultMaterial: Material = { texture: defaultTexture, textureName: "Default Material", }; const initialMaterial: Material = { texture: wallTexture1, textureName: "Grunge Concrete Wall", }; const WallProperties = () => { const { wallHeight, wallThickness, setWallHeight, setWallThickness } = useBuilderStore(); const [activeSide, setActiveSide] = useState<"side1" | "side2">("side1"); const [materials, setMaterials] = useState([ defaultMaterial, initialMaterial, ]); const [selectedMaterials, setSelectedMaterials] = useState<{ side1: Material | null; side2: Material | null; }>({ side1: null, side2: null, }); // Set default material initially for both sides useEffect(() => { setSelectedMaterials({ side1: defaultMaterial, side2: defaultMaterial, }); }, []); const handleHeightChange = (newValue: string) => { setWallHeight(parseFloat(newValue)); }; const handleThicknessChange = (newValue: string) => { setWallThickness(parseFloat(newValue)); }; const handleAddMaterial = () => { const newMaterial: Material = { texture: defaultMaterial.texture, textureName: `Material ${materials.length + 1}`, }; setMaterials([...materials, newMaterial]); }; const handleSelectMaterial = (material: Material) => { setSelectedMaterials((prev) => ({ ...prev, [activeSide]: material, })); }; const handleRemoveMaterial = (index: number) => { const removedTexture = materials[index].texture; const updatedMaterials = materials.filter((_, i) => i !== index); const newMaterials = updatedMaterials.length === 0 ? [defaultMaterial] : updatedMaterials; setMaterials(newMaterials); setSelectedMaterials((prev) => { const updated = { ...prev }; ["side1", "side2"].forEach((side) => { if (updated[side as "side1" | "side2"]?.texture === removedTexture) { updated[side as "side1" | "side2"] = defaultMaterial; } }); return updated; }); }; return (
Wall
handleHeightChange(val)} /> handleThicknessChange(val)} />
Materials
{selectedMaterials[activeSide] && ( {selectedMaterials[activeSide]!.textureName} )}
{materials.length === 0 ? (
No materials added yet.
) : (
{materials.map((material, index) => { const isSelected = selectedMaterials[activeSide]?.texture === material.texture; return ( ); })}
)}
); }; export default WallProperties;