import React, { useEffect, useMemo, useState } from "react"; import Search from "../../ui/inputs/Search"; import vehicle from "../../../assets/image/vehicles.png"; import workStation from "../../../assets/image/workStation.png"; import machines from "../../../assets/image/machines.png"; import feneration from "../../../assets/image/feneration.png"; import worker from "../../../assets/image/worker.png"; import { getCategoryAsset } from "../../../services/factoryBuilder/assest/assets/getCategoryAsset"; import arch from "../../../assets/gltf-glb/arch.glb"; import door from "../../../assets/gltf-glb/door.glb"; import window from "../../../assets/gltf-glb/window.glb"; import { fetchAssets } from "../../../services/marketplace/fetchAssets"; import { useSelectedItem } from "../../../store/store"; interface AssetProp { filename: string; thumbnail?: string; category: string; description?: string; tags: string; url?: String; uploadDate?: number; isArchieve?: boolean; animated?: boolean; price?: number; CreatedBy?: String; } interface CategoryListProp { assetImage?: string; assetName?: string; categoryImage: string; category: string; } const Assets: React.FC = () => { const { setSelectedItem } = useSelectedItem(); const [searchValue, setSearchValue] = useState(""); const [selectedCategory, setSelectedCategory] = useState(null); const [categoryAssets, setCategoryAssets] = useState([]); const [filtereredAssets, setFiltereredAssets] = useState([]); const [categoryList, setCategoryList] = useState([]); const handleSearchChange = (value: string) => { const searchTerm = value.toLowerCase(); setSearchValue(value); if (searchTerm.trim() === "" && !selectedCategory) { setCategoryAssets([]); return; } const filteredModels = filtereredAssets?.filter((model) => { if (!model?.tags || !model?.filename || !model?.category) return false; if (searchTerm.startsWith(":") && searchTerm.length > 1) { const tagSearchTerm = searchTerm.slice(1); return model.tags.toLowerCase().includes(tagSearchTerm); } else if (selectedCategory) { return ( model.category .toLowerCase() .includes(selectedCategory.toLowerCase()) && model.filename.toLowerCase().includes(searchTerm) ); } else { return model.filename.toLowerCase().includes(searchTerm); } }); setCategoryAssets(filteredModels); }; useEffect(() => { const filteredAssets = async () => { try { const filt = await fetchAssets(); setFiltereredAssets(filt); } catch {} }; filteredAssets(); }, [categoryAssets]); useEffect(() => { setCategoryList([ { assetName: "Doors", assetImage: "", category: "Feneration", categoryImage: feneration, }, { assetName: "Windows", assetImage: "", category: "Feneration", categoryImage: feneration, }, { assetName: "Pillars", assetImage: "", category: "Feneration", categoryImage: feneration, }, { category: "Vehicles", categoryImage: vehicle }, { category: "Workstation", categoryImage: workStation }, { category: "Machines", categoryImage: machines }, { category: "Workers", categoryImage: worker }, ]); }, []); const fetchCategoryAssets = async (asset: any) => { setSelectedCategory(asset); if (asset === "Feneration") { const localAssets: AssetProp[] = [ { filename: "arch", category: "Feneration", url: arch, tags: "arch", }, { filename: "door", category: "Feneration", url: door, thumbnail: feneration, tags: "door", }, { filename: "window", category: "Feneration", url: window, tags: "window", }, ]; setCategoryAssets(localAssets); setFiltereredAssets(localAssets); } else { try { const res = await getCategoryAsset(asset); setCategoryAssets(res); setFiltereredAssets(res); } catch (error) {} } }; return (
{searchValue ? (

Results for {searchValue}

{categoryAssets && categoryAssets?.map((asset: any, index: number) => (
{asset.filename}
{asset.filename .split("_") .map( (word: any) => word.charAt(0).toUpperCase() + word.slice(1) ) .join(" ")}
))}
) : selectedCategory ? (
{ setSelectedCategory(null); setCategoryAssets([]); }} > ← Back

{selectedCategory}

{categoryAssets && categoryAssets?.map((asset: any, index: number) => (
{asset.filename} setSelectedItem({ name: asset.filename, id: asset.modelfileID, }) } />
{asset.filename .split("_") .map( (word: any) => word.charAt(0).toUpperCase() + word.slice(1) ) .join(" ")}
))}
) : (

Categories

{Array.from( new Set(categoryList.map((asset) => asset.category)) ).map((category, index) => { const categoryInfo = categoryList.find( (asset) => asset.category === category ); return (
fetchCategoryAssets(category)} > {category}
{category}
); })}
)}
); }; export default Assets;