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

export default function Home() {
    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: 200,
            category: "Category 2",
            rating: 4.0,
            discount: 20,
        },
        {
            id: "3",
            name: "Item 3",
            description: "Description 3",
            price: 30,
            stock: 300,
            category: "Category 3",
            rating: 4.8,
            discount: 15,
        },
        {
            id: "4",
            name: "Item 3",
            description: "Description 3",
            price: 30,
            stock: 300,
            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 [currentPage, setCurrentPage] = useState(1); // Zustand für die aktuelle Seite
    const [itemsPerPage, setItemsPerPage] = useState(9); // Dynamische Anzahl der Items pro Seite

    // Berechnung der angezeigten Items basierend auf der aktuellen Seite
    const indexOfLastItem = currentPage * itemsPerPage;
    const indexOfFirstItem = indexOfLastItem - itemsPerPage;
    const currentItems = items.slice(indexOfFirstItem, indexOfLastItem);

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

    // Dynamische Berechnung der Anzahl der Items pro Seite basierend auf der Fensterbreite
    const calculateItemsPerPage = () => {
        const width = window.innerWidth;
        const columns = Math.floor(width / 300); // Jede Spalte ist ca. 300px breit
        const rows = Math.floor(window.innerHeight / 400); // Jede Zeile ist ca. 400px hoch
        return columns * rows;
    };

    useEffect(() => {
        const updateItemsPerPage = () => {
            setItemsPerPage(calculateItemsPerPage());
        };

        // Initiale Berechnung und Event-Listener hinzufügen
        updateItemsPerPage();
        window.addEventListener("resize", updateItemsPerPage);

        // Event-Listener entfernen, wenn die Komponente unmountet wird
        return () => {
            window.removeEventListener("resize", updateItemsPerPage);
        };
    }, []);

    return (
        <div className="page-background">
            <Box className="cardgrid">
                {currentItems.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"
                sx={{ marginTop: 2 }}
            />
        </div>
    );
}
