frontend/src/organisms/MenuSection.js

import { useState, useEffect } from 'react';
import { Container, Carousel, Row, Col, Button } from 'react-bootstrap';
import MenuItem from '../molecules/MenuItem';
import CacheStorage from './CacheStorage';
import axios from 'axios';

const carouselImages = [
    { itemType: 1, imageUrl: '/dishes.jpg' },
    { itemType: 2, imageUrl: '/drinks.jpg' },
    { itemType: 3, imageUrl: '/desserts.jpg' },
];

function MenuSection() {

    const [carouselMaxHeight, setHeight] = useState('700px');
    const [index, setIndex] = useState(0);
    const [menuItems, setMenuItems] = useState({}); // Đối tượng lưu danh sách món theo từng itemType
    const [loading, setLoading] = useState(true);

    const handleSelect = (selectedIndex) => {
        setIndex(selectedIndex);
    };

    // const menuItems = [
    //   { name: 'Món 1', description: 'Mô tả món 1', imageSrc: '/placeholder3.jpg' },
    //   { name: 'Món 2', description: 'Mô tả món 2', imageSrc: '/placeholder3.jpg' },
    //   { name: 'Món 3', description: 'Mô tả món 3', imageSrc: '/placeholder3.jpg' }
    // ];


    const categoryMapper = {
        1: 'Món chính',
        2: 'Đồ uống',
        3: 'Tráng miệng',
    };

    useEffect(() => {
        const fetchMenuItems = async () => {
            try {
                const menuItemsByType = {};

                for (const carousel of carouselImages) {
                    // Gọi API để lấy món theo itemType
                    const response = await axios.get(process.env.REACT_APP_API_URL + `/menu-items?limit=3&filter.item_type=${carousel.itemType}`);
                    // Lưu danh sách món theo itemType
                    menuItemsByType[carousel.itemType] = response.data.data;
                }
                console.log(menuItemsByType);
                setMenuItems(menuItemsByType);
                setLoading(false);
                CacheStorage.set('homeMenuItems',JSON.stringify(menuItemsByType));
                console.log('fetched from API');
            } catch (error) {
                console.error('Error fetching menu items:', error);
                setLoading(false);
            }
        };
        if (CacheStorage.get('homeMenuItems')) {
            setMenuItems(JSON.parse(CacheStorage.get('homeMenuItems')));
            setLoading(false);
            console.log('fetched from cache');
        } else {
            fetchMenuItems();
        }
    }, []);

    useEffect(() => {
        const handleResize = () => {
            if (window.innerWidth < 992) { // md
                setHeight('1500px'); // Không giới hạn chiều cao
            } else {
                setHeight('700px'); // Giới hạn chiều cao cho md trở lên
            }
        };

        // Đăng ký event resize
        window.addEventListener('resize', handleResize);

        // Gọi lần đầu để xác định chiều cao ban đầu
        handleResize();

        // Cleanup
        return () => {
            window.removeEventListener('resize', handleResize);
        };
    }, []);


    let menuContent;

    if (loading) {
        menuContent = (<p>Đang tải dữ liệu</p>);
    } else {
        menuContent = (<Carousel activeIndex={index} onSelect={handleSelect} data-bs-theme="dark">
            {carouselImages.map((carousel, index) => (
                <Carousel.Item key={index}>
                    <div className="d-flex justify-content-center align-items-center" style={{ width: '100%' }}>
                        <img
                            className="img-fluid"
                            src={carousel.imageUrl}
                            alt={`Carousel ${carousel.itemType}`}
                            style={{
                                height: carouselMaxHeight,
                                width: '100vw',
                                objectPosition: 'center',
                                objectFit: 'cover',
                            }}
                        />
                        <div
                            style={{
                                position: 'absolute',
                                top: 0,
                                left: 0,
                                width: '100%',
                                height: '100%',
                                backgroundColor: 'rgba(0, 0, 0, 0.5)', // Màu tối với độ trong suốt
                            }}
                        ></div>
                    </div>

                    <Carousel.Caption>
                        <div className='my-5'>
                            <h1 style={{ color: "var(--text-color)" }} className='mb-5'>{categoryMapper[carousel.itemType]}</h1>
                            <Row className="g-4">
                                {Array.from(menuItems[carousel.itemType]).map((item, idx) => (
                                    <Col sm={12} lg={4} key={idx}>
                                        <MenuItem
                                            dishName={item.item_name}
                                            description={item.description}
                                            imageSrc={item.image_url}
                                        />
                                    </Col>
                                ))}
                            </Row>
                            <Button as='a' href='/menu' className='mt-5'> Xem thêm các món </Button>
                        </div>
                    </Carousel.Caption>
                </Carousel.Item>
            ))}
        </Carousel>);
    }

    return (
        <Container id="menu" className="text-center justify-content-center align-items-center my-5" style={{ maxWidth: "100%" }}>
            <h1 className='mb-5'>Menu</h1>
            {menuContent}
        </Container>
    );
}

export default MenuSection;