import { useCallback, useMemo, useState } from "react"; import useAppStore from "../../store/useAppStore"; import type { Product } from "../../types"; export function useRoomVisualizer(products: Product[]) { const viewMode = useAppStore((store) => store.viewMode); const setViewMode = useAppStore((store) => store.setViewMode); const openProductId = useAppStore((store) => store.openProductId); const setOpenProductId = useAppStore((store) => store.setOpenProductId); const [isSearchOpen, setIsSearchOpen] = useState(false); const [searchQuery, setSearchQuery] = useState(""); const filteredProducts = useMemo(() => { const normalizedQuery = searchQuery.trim().toLowerCase(); return products.filter((product) => { return ( normalizedQuery.length === 0 || product.brand.toLowerCase().includes(normalizedQuery) || product.name.toLowerCase().includes(normalizedQuery) || product.ref.toLowerCase().includes(normalizedQuery) || product.size.toLowerCase().includes(normalizedQuery) ); }); }, [products, searchQuery]); const handleSelectProduct = useCallback( (id: string | number | null) => { setOpenProductId(openProductId === id ? null : id); }, [openProductId, setOpenProductId], ); const closeSearch = useCallback(() => { setIsSearchOpen(false); setSearchQuery(""); }, []); const showGrid = useCallback(() => setViewMode("grid"), [setViewMode]); const showList = useCallback(() => setViewMode("list"), [setViewMode]); const chunkArray = useCallback((arr: T[], size: number): T[][] => { const chunks: T[][] = []; for (let i = 0; i < arr.length; i += size) { chunks.push(arr.slice(i, i + size)); } return chunks; }, []); const selectedProduct = useMemo( () => products.find((product) => product.id === openProductId) ?? null, [products, openProductId], ); return { viewMode, showGrid, showList, openProductId, handleSelectProduct, selectedProduct, isSearchOpen, setIsSearchOpen, searchQuery, setSearchQuery, closeSearch, filteredProducts, chunkArray, }; }