import { useState, useEffect } from 'react';
import { Button, Container, Row, Col, Tab, Tabs, Alert } from 'react-bootstrap';
import AdminTemplate from "../../templates/AdminTemplate";
import DataStorage from '../../organisms/DataStorage';
import axios from 'axios';
import MenuItem from '../../molecules/MenuItem';
import { useNavigate } from 'react-router-dom';

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

export default function AdminMenuPage() {

    const navigate = useNavigate();

    useEffect(() => {
        if (!DataStorage.get('isLoggedInAdmin')) {
            navigate('/admin-login');
        }
    }, [navigate]);

    const [error, setError] = useState("");
    const [loading, setLoading] = useState(true);
    const [menuItems, setMenuItems] = useState({});
    const [key, setKey] = useState(0);

    function organizeMenuItemsByType(menuData) {
        // Lấy ra tất cả menu_item từ array ban đầu
        const menuItems = menuData.map(item => item);

        // Tạo một object để nhóm menu_item theo item_type, khởi tạo các mảng rỗng cho mỗi item_type từ categoryMapper
        const organizedItems = categoryMapper.reduce((acc, { itemType }) => {
            acc[itemType] = [];
            return acc;
        }, {});

        // Thêm menu_item vào organizedItems theo item_type
        menuItems.forEach(menuItem => {
            const type = menuItem.item_type;

            // Đưa menu_item vào array của item_type tương ứng
            if (organizedItems[type]) {
                organizedItems[type].push(menuItem);
            }
        });

        return organizedItems;
    }

    useEffect(() => {
        const fetchMenuItems = async () => {
            try {
                let menuItemsByType = {};
                // Gọi API để lấy món theo itemType
                const response = await axios.get(process.env.REACT_APP_API_URL + `/menu-items?limit=100`);
                // Lưu danh sách món theo itemType
                console.log('Response', response.data.data);
                menuItemsByType = organizeMenuItemsByType(response.data.data);

                console.log(menuItemsByType);
                setMenuItems(menuItemsByType);
                setLoading(false);
            } catch (error) {
                setError(JSON.stringify(error));
                setLoading(false);
            }
        }
        fetchMenuItems()
    }, [])


    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={() => navigate(`/admin-menu-edit?id=${item.id}`)}>
                                        <MenuItem
                                            dishName={item.item_name}
                                            description={item.description}
                                            imageSrc={item.image_url}
                                        />
                                    </div>
                                </Col>
                            ))}
                        </Row>
                    </Container>
                </Tab>
            ))}
        </Tabs>);
    }

    return (
        <AdminTemplate content={
            (
                <Container className='text-center align-items-center justify-content-center' style={{ minHeight: '80vh' }}>

                    {error && <Alert variant="danger">{error}</Alert>}

                    <h1 className='mb-5'>Menu</h1>
                    <Row className='my-5 justify-content-center align-items-center'>
                        <Col xs={8} md={4} lg={2}>
                            <Button onClick={() => navigate(`/admin-menu-edit`)}>
                                Bổ sung món mới
                            </Button>
                        </Col>
                    </Row>
                    <Row className="align-items-center">
                        {menuContent}
                    </Row>
                </Container>
            )
        } />
    );
}