dps-webshop/01-frontend/src/pages/Home.tsx

import { Box, Pagination } from "@mui/material";
import { useEffect, useState } from "react";
import Item from "../components/Item";
import FilterItem from "../helper/homepage/FilterItem";
import ItemCard from "../helper/homepage/ItemCard";
import "./pages.css"; // Import der CSS-Datei
import { useLocation } from "react-router-dom";
import {useTranslation} from "react-i18next";

export default function Home() {

    const { t } = useTranslation();

    const items: Item[] = [
        {
            id: "1",
            name: "Item 1",
            description: "Description 1",
            price: 10,
            stock: 100,
            category: "Category 1",
            rating: 4.5,
            discount: 10,
        },
        {
            id: "2",
            name: "Item 2",
            description: "Description 2",
            price: 20,
            stock: 9,
            category: "Category 2",
            rating: 4.0,
            discount: 20,
        },
        {
            id: "3",
            name: "Item 3",
            description: "Description 3",
            price: 30,
            stock: 10,
            category: "Category 3",
            rating: 4.8,
            discount: 15,
        },
        {
            id: "4",
            name: "Item 3",
            description: "Description 3",
            price: 30,
            stock: 0,
            category: "Category 3",
            rating: 4.8,
            discount: 15,
        },
        {
            id: "5",
            name: "Item 3",
            description: "Description 3",
            price: 30,
            stock: 300,
            category: "Category 3",
            rating: 4.8,
            discount: 15,
        },
        {
            id: "6",
            name: "Item 3",
            description: "Description 3",
            price: 30,
            stock: 300,
            category: "Category 3",
            rating: 4.8,
            discount: 15,
        },
        {
            id: "7",
            name: "Item 3",
            description: "Description 3",
            price: 30,
            stock: 300,
            category: "Category 3",
            rating: 4.8,
            discount: 15,
        },
        {
            id: "8",
            name: "Item 3",
            description: "Description 3",
            price: 30,
            stock: 300,
            category: "Category 3",
            rating: 4.8,
            discount: 15,
        },
        {
            id: "9",
            name: "Item 3",
            description: "Description 3",
            price: 30,
            stock: 300,
            category: "Category 3",
            rating: 4.8,
            discount: 15,
        },
        {
            id: "10",
            name: "Item 3",
            description: "Description 3",
            price: 30,
            stock: 300,
            category: "Category 3",
            rating: 4.8,
            discount: 15,
        },
        {
            id: "11",
            name: "Item 3",
            description: "Description 3",
            price: 30,
            stock: 300,
            category: "Category 3",
            rating: 4.8,
            discount: 15,
        },
        {
            id: "12",
            name: "Item 3",
            description: "Description 3",
            price: 30,
            stock: 300,
            category: "Category 3",
            rating: 4.8,
            discount: 15,
        },
        // Weitere Items hinzufügen
    ];

    const categoriesFilter = [
        { value: "", label: t("all") },
        { value: "Seeds", label: t("seeds") },
        { value: "GardenSupplies", label: t("gardenSupplies") },
        { value: "TechnicalComponents", label: t("technicalComponents") },
        { value: "Other", label: t("other") }
    ];

    const priceFilter = [
        { value: "", label: t("all") },
        { value: "< 10", label: "< 10 €" },
        { value: "< 20", label: "< 20 €" },
        { value: ">= 20", label: "≥ 20 €" }
    ];

    const ratingFilter = [
        { value: "", label: t("all") },
        ...[5, 4, 3, 2, 1].map(value => ({
            value: value.toString(),
            label: value.toString()
        }))
    ];

    const [currentPage, setCurrentPage] = useState(1); // Zustand für die aktuelle Seite
    const [itemsPerPage, setItemsPerPage] = useState(9); // Dynamische Anzahl der Items pro Seite
    const [visibleItems, setVisibleItems] = useState<Item[]>([]); // Zustand für die sichtbaren Items
    const [selectedCategory, setSelectedCategory] = useState<string | null>(null);
    const [selectedPrice, setSelectedPrice] = useState<string | null>(null);
    const [selectedRating, setSelectedRating] = useState<string | null>(null);

    const location = useLocation();

    useEffect(() => {
        const params = new URLSearchParams(location.search);
        const category = params.get("category");
        if (category && categoriesFilter.some(filter => filter.value === category)) {
            setSelectedCategory(category);
        }
    }, [location.search]);

    const handleCategoryChange = (category: string) => {
        setSelectedCategory(category);
        // Optional: URL aktualisieren
        // navigate(`/?category=${encodeURIComponent(category)}`);
    };

    // Handler für die Pagination
    const handlePageChange = (event: React.ChangeEvent<unknown>, page: number) => {
        setCurrentPage(page);
    };

    // Aktualisiere die Anzahl der Karten bei Größenänderung
    useEffect(() => {
        const updateItems = () => {
            const newItemsPerPage = calculateItemsPerPage();
            setItemsPerPage(newItemsPerPage);
            const startIndex = (currentPage - 1) * newItemsPerPage;
            setVisibleItems(items.slice(startIndex, startIndex + newItemsPerPage));
        };

        updateItems(); // Initialer Aufruf
        window.addEventListener("resize", updateItems); // Event-Listener hinzufügen
        return () => window.removeEventListener("resize", updateItems); // Event-Listener entfernen
    }, [currentPage]);

    // Dynamische Berechnung der Anzahl der Items pro Seite basierend auf der Fensterbreite
    const calculateItemsPerPage = () => {
        const cardHeight = 220; // Höhe einer Karte (inkl. Margin/Padding)
        const paginationHeight = 60; // Höhe der Pagination
        const availableHeight = window.innerHeight - paginationHeight - 60; // Verfügbare Höhe (inkl. Padding)
        const itemsPerRow = Math.floor(window.innerWidth / 220); // Karten pro Zeile (220px Breite inkl. Margin)
        const rows = Math.floor(availableHeight / cardHeight); // Maximale Anzahl an vollständigen Reihen
        return itemsPerRow * rows;
    };

    return (
        <div className="home-page-background">
            <div className="filter-container">
                <FilterItem
                    filterName={t('category')}
                    filterItems={categoriesFilter}
                    value={selectedCategory}
                    onChange={handleCategoryChange}
                />
                <FilterItem
                    filterName={t('price')}
                    filterItems={priceFilter}
                    value={selectedPrice}
                    onChange={setSelectedPrice}
                />
                <FilterItem
                    filterName={t('rating')}
                    filterItems={ratingFilter}
                    value={selectedRating}
                    onChange={setSelectedRating}
                />
            </div>
            <div className="page-background">
                <Box className="cardgrid">
                    {visibleItems.map((item) => (
                        <ItemCard key={item.id} item={item} />
                    ))}
                </Box>

                <Pagination
                    count={Math.ceil(items.length / itemsPerPage)} // Gesamtanzahl der Seiten
                    page={currentPage} // Aktuelle Seite
                    onChange={handlePageChange} // Seitenwechsel-Handler
                    variant="outlined"
                    shape="rounded"
                    className="pagination" // CSS-Klasse für die Pagination
                />
            </div>
        </div>

    );
}