import React, { useState, useEffect } from "react";
import { Menu } from "antd";
import { HomeOutlined } from "@ant-design/icons"
import { Home } from "../../pages";
import { getRooms } from "../../api/room";
import { isLoggedIn } from "../../api/authentication"
import { Items } from "../../pages/items";
import { Link } from "react-router-dom";

function getItem(key, label) {
  //return {
  //    key: String(key),
  //    icon,
  //    children,
  //    label,
  //    link,
    //};
    var item = <Menu.Item key={key}>
        <Link to="/test">{label}</Link>
    </Menu.Item >
    return item
}

const { SubMenu } = Menu;

// Component
const Navbar = () => {
  //Hook calls
    const [rooms, setRooms] = useState([]);

    useEffect(() => {
        console.log("NAVBAR EFFECT")
        isLoggedIn().then((user) => {
            if (user !== "Unauthorized") {
                getRooms().then((result) => {
                    setRooms(result);
                })
            }
        })
    }, []);




    const roomItems = rooms.map((room, index) => (
        console.log(index),
        getItem(`sub${index}`, room.name)
    ));


    const items = [
        <Menu.Item key="0">
            <Link to="/">Menu Principal</Link>
        </Menu.Item>,
        <Menu.Item key="1" >
            <Link to="/home">Home</Link>
        </Menu.Item>,
        <Menu.Item key="2" >
            <Link to="/items">Tous les articles</Link>
        </Menu.Item>,
        <SubMenu key="3"  title="Chambres">
            {roomItems}
        </SubMenu>


    ];

    // Rendu du composant Navbar
    try {
        return (
            <Menu
                defaultSelectedKeys={["1"]}
                defaultOpenKeys={["sub1"]}
                theme="dark"
                mode="inline"
            >
                {items}

            </Menu>
        );
    } catch (error) {
        console.log(error.stack)
    }
};
export default Navbar;