frontend/src/pages/MenuPage.js

import { useState, useEffect } from 'react';
import { Modal, Button, Container, Row, Col, Tab, Tabs, Form, InputGroup } from 'react-bootstrap';
import MenuItem from '../molecules/MenuItem';
import BasicTemplate from '../templates/BasicTemplate';
import DataStorage from '../organisms/DataStorage';
import CacheStorage from '../organisms/CacheStorage';
import axios from 'axios';

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

function MenuPage() {
    const [key, setKey] = useState(0);
    const [selectedDish, setSelectedDish] = useState(null);
    const [show, setShow] = useState(false);
    const [cartAmount, setCartAmount] = useState(0);
    const [loading, setLoading] = useState(true);
    const [menuItems, setMenuItems] = useState({});

    function handleClose() {
        const cart = JSON.parse(DataStorage.get('cart')) || {};  // Đảm bảo cart không null

        cart[selectedDish.id] = {
            'name':selectedDish.item_name,
            'amount': cartAmount,
            'imageSrc': selectedDish.image_url,
            'price': selectedDish.price
        };
        for (let id in cart) {
            if (cart[id].amount === 0) {
                delete cart[id];
            }
            DataStorage.set('cart', JSON.stringify(cart));
            // console.log(JSON.stringify(filteredCart));
            setShow(false);
        }
    }
    function notLoggedInClose() {
        setShow(false);
    }

    function handleShow(dish) {
        if (DataStorage.get('isLoggedIn') === null) {
            setShow(true);
            return;
        } else {
            setSelectedDish(dish);  // Đặt selectedDish ngay lập tức

            // Sau khi cập nhật selectedDish, lấy dữ liệu từ cart theo tên món ăn mới
            const cart = JSON.parse(DataStorage.get('cart')) || {};

            // Kiểm tra số lượng món ăn trong cart
            const amount = cart[dish.id] !== undefined ? cart[dish.id] : 0;
            setCartAmount(amount);  // Cập nhật số lượng
            setShow(true);          // Hiển thị modal
        }
    }

    function setIncrease() {
        setCartAmount(cartAmount + 1);
    }

    function setDecrease() {
        if (cartAmount > 0) {
            setCartAmount(cartAmount - 1);
        }
    }

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

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

        if (CacheStorage.get('menuItems')) {
            setMenuItems(JSON.parse(CacheStorage.get('menuItems')));
            setLoading(false);
        } else {
            fetchMenuItems();
        }

    }, []);

    let modalContent;

    if (DataStorage.get('isLoggedIn') === null) {
        modalContent = (
            <Modal show={show} onHide={notLoggedInClose} className='text-center align-items-center'>
                <Modal.Header closeButton className='text-center'>
                    <Modal.Title>Bạn chưa đăng nhập</Modal.Title>
                </Modal.Header>
                <Modal.Body>
                    Vui lòng đăng nhập để xem chi tiết món và đặt hàng
                </Modal.Body>
                <Modal.Footer>
                    <Button variant="primary" as='a' href='/login'>
                        Đăng nhập
                    </Button>
                    <Button variant="secondary" onClick={notLoggedInClose}>
                        Đóng
                    </Button>
                </Modal.Footer>
            </Modal>
        )
    }
    else {
        modalContent = (<Modal show={show} onHide={handleClose} className='text-center'>
            <Modal.Header closeButton className='text-center'>
                <Modal.Title >{selectedDish?.item_name}</Modal.Title> {/* Dish name in the title */}
            </Modal.Header>
            <Modal.Body>
                <img src={selectedDish?.image_url} alt={selectedDish?.item_name} style={{ width: '100%' }} />  {/* Dish image */}
                <p>{selectedDish?.description}</p>  {/* Dish description */}

                <Row className='mb-5'>
                    <Col md={2}></Col>
                    <Col md={8}>
                        <Form.Label>Số lượng</Form.Label>
                        <Row>
                            <InputGroup mb={4} className='mb-3'>
                                <InputGroup.Text as='button' onClick={setDecrease}>-</InputGroup.Text>
                                <Form.Control
                                    value={cartAmount}
                                    aria-label="Amount"
                                    onChange={(e) => setCartAmount(e.target.value)} />
                                <InputGroup.Text as='button' onClick={setIncrease}>+</InputGroup.Text>
                            </InputGroup>
                        </Row>
                    </Col>
                    <Col md={2}></Col>
                </Row>

            </Modal.Body>
            <Modal.Footer>
                <Button variant="secondary" onClick={handleClose}>
                    Đóng
                </Button>
            </Modal.Footer>
        </Modal>);
    }

    let menuContent;

    if (loading) {
        menuContent = (<p>Đang tải thực đơn...</p>);
    } else {
        menuContent = (<Tabs
            id="controlled-tab-example"
            activeKey={key}
            onSelect={(k) => setKey(k)}
            className="mb-3 custom-tab"
        >
            {categoryMapper.map((category, index) => (
                <Tab eventKey={index} title={category.category}>
                    <Container fluid className='my-5'>
                        <Row md={3} className="g-4">
                            {menuItems[category.itemType].map((item, idx) => (
                                <Col key={item.id}>
                                    <div onClick={() => handleShow(item)} className="text-center">
                                        <MenuItem
                                            dishName={item.item_name}
                                            description={item.description}
                                            imageSrc={item.image_url}
                                        />
                                    </div>
                                </Col>
                            ))}
                        </Row>
                    </Container>
                </Tab>
            ))}
        </Tabs>);
    }

    return <BasicTemplate content={(
        <Container fluid className='my-5' style={{ minHeight: '70vh' }}>
            <>
                {modalContent}
            </>
            <h1 className='text-center mb-5'>Thực đơn</h1>
            <Row>
                <Col xs={1} md={2}></Col>
                <Col xs={10} md={8}>
                    {menuContent}
                </Col>
                <Col xs={1} md={2}></Col>
            </Row>
        </Container>

    )} />
}

export default MenuPage;