import { Box, Button, Typography } from "@mui/material";
import { useTranslation } from "react-i18next";
import { useState } from "react";
import "./pages.css";
import ItemCard from "../helper/homepage/ItemCard";
import AddShoppingCartIcon from '@mui/icons-material/AddShoppingCart';

import farmingStation from '../assets/fscomponents/fs_components_0.png';
import growrack from '../assets/fscomponents/fs_components_1.png';
import tank from '../assets/fscomponents/fs_components_2.png';
import control from '../assets/fscomponents/fs_components_3.png';
import light from '../assets/fscomponents/fs_components_4.png';
import pump from '../assets/fscomponents/fs_components_5.png';
import flowerpots from '../assets/fscomponents/fs_components_6.png';
import pipes from '../assets/fscomponents/fs_components_7.png';

export default function FSComponents() {

    const { t } = useTranslation();
    const [hoverIndex, setHoverIndex] = useState<number | null>(null);

    const exampleItems = [
        { id: "1", uuid: "uuid-1", name: "Regal", price100: 12999, discount100: 0, rating: 9, stock: 12, description: "Test", category: "TechnicalComponents" },
        { id: "2", uuid: "uuid-2", name: "Tank", price100: 4999, discount100: 50, rating: 3, stock: 5, description: "Test", category: "TechnicalComponents" },
        { id: "3", uuid: "uuid-3", name: "Steuerung", price100: 8999, discount100: 0, rating: 5, stock: 0, description: "Test", category: "TechnicalComponents" },
        { id: "4", uuid: "uuid-4", name: "Beleuchtung", price100: 2999, discount100: 20, rating: 8, stock: 3, description: "Test", category: "GardenSupplies" },
        { id: "5", uuid: "uuid-5", name: "Pumpe", price100: 1999, discount100: 0, rating: 10, stock: 25, description: "Test", category: "TechnicalComponents" },
        { id: "6", uuid: "uuid-6", name: "Pflanztöpfe", price100: 1099, discount100: 0, rating: 4, stock: 15, description: "Test", category: "GardenSupplies" },
        { id: "7", uuid: "uuid-7", name: "Schläuche", price100: 799, discount100: 0, rating: 7, stock: 9, description: "Test", category: "TechnicalComponents" }
    ];

    const componentImages = [
        growrack,
        tank,
        control,
        light,
        pump,
        flowerpots,
        pipes
    ];

    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 ? componentImages[hoverIndex] : farmingStation}
                     alt={t('componentsFarmingStation')}
                     sx={{
                         width: '100%',
                         height: 'auto',
                         maxHeight: '80vh',
                         objectFit: 'contain',
                         borderRadius: 2,
                         border: theme => `4px solid ${theme.palette.primary.main}`,
                         marginBottom: 2
                     }}
                />
                <Button variant="contained" fullWidth startIcon={<AddShoppingCartIcon />}>
                    {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">
                    {exampleItems.map((item, index) => (
                        <div
                            key={item.id}
                            onMouseEnter={() => setHoverIndex(index)}
                            onMouseLeave={() => setHoverIndex(null)}
                        >
                            <ItemCard item={item} />
                        </div>
                    ))}
                </Box>
            </Box>
        </Box>
    );
}
