import { Box, Button, Typography, useTheme } from "@mui/material";
import { useTranslation } from "react-i18next";
import { useState } from "react";
import { useQuery } from "@tanstack/react-query";
import { useBasket } from "../helper/BasketProvider";
import ItemCard from "../helper/homepage/ItemCard";
import AddShoppingCartIcon from '@mui/icons-material/AddShoppingCart';

import farmingStation from '../assets/fscomponents/fs_components_0.png';
import { ItemWithFSImage } from "../components/Item"; "../components/Item";
import { fetchFarmingStationItemList } from "../helper/query/Queries";

export default function FSComponents() {
    const { t } = useTranslation();
    const theme = useTheme();
    const { addToBasket } = useBasket();
    const [hoverIndex, setHoverIndex] = useState<number | null>(null);

    // Sehr sehr dummer Weg das zu machen, aber wird später noch refactored
    const wantedIds = ["60", "67", "68", "69", "70", "71", "72", "73", "74", "75"];

    // Daten mit react-query laden
    const { data = [], isLoading, error } = useQuery<ItemWithFSImage[]>({
        queryKey: ['fetchFarmingStationItemList'],
        queryFn: fetchFarmingStationItemList,
        retry: 3,
        retryDelay: 1000,
    });

    // Button-Funktion: alle gefilterten Items in den Warenkorb packen
    const handleAddAllToCart = () => {
        data.forEach(item => {
            addToBasket(item, 1);
        });
    };

    if (isLoading) return <Typography>{t('loading')}</Typography>;
    if (error) return <Typography color="error">{t('errorLoadingItems')}</Typography>;

    return (
        <Box sx={{ width: '100%', display: 'flex', maxWidth: 1600, mx: 'auto', pt: 2, height: '100vh' }}>
            {/* Bild links */}
            <Box sx={{
                width: 'auto',
                height: '90vh',
                position: 'sticky',
                display: 'flex',
                flexDirection: 'column',
                alignItems: 'center',
                justifyContent: 'center',
                padding: 2,
                overflow: 'hidden',
            }}>
                <Box
                    component="img"
                    src={hoverIndex !== null ? data[hoverIndex].farmImage : farmingStation}
                    alt={t('componentsFarmingStation')}
                    sx={{
                        width: '100%',
                        height: 'auto',
                        maxHeight: '80vh',
                        objectFit: 'contain',
                        borderRadius: 2,
                        border: `4px solid ${theme.palette.primary.main}`,
                        marginBottom: 2,
                    }}
                />
                <Button
                    variant="contained"
                    fullWidth
                    startIcon={<AddShoppingCartIcon />}
                    onClick={handleAddAllToCart}
                >
                    {t('addAllToCart')}
                </Button>
            </Box>

            {/* Items rechts */}
            <Box sx={{
                width: '60%',
                height: '90vh',
                overflowY: 'auto',
                padding: 2,
            }}>
                <Box mb={2}>
                    <Typography variant="h4" align="center" gutterBottom sx={{ color: 'text.primary' }}>
                        {t('componentsFarmingStation')}
                    </Typography>
                </Box>
                <Box className="cardgrid">
                    {data.map((item, index) => (
                        <div
                            key={item.id}
                            onMouseEnter={() => setHoverIndex(index)}
                            onMouseLeave={() => setHoverIndex(null)}
                        >
                            <ItemCard item={item} />
                        </div>
                    ))}
                </Box>
            </Box>
        </Box>
    );
}
