import React, { useState } from "react";
import { Authenticated } from "..";
import { Router } from "../../router";

import {
  AppstoreOutlined,
  ContainerOutlined,
  DesktopOutlined,
  MailOutlined,
  MenuFoldOutlined,
  MenuUnfoldOutlined,
  PieChartOutlined,
} from "@ant-design/icons";
import { Button, Menu } from "antd";
import { Home } from "../../pages";
import { getRoom } from "../../api/room";
import { getAuth, useAuth } from "../../hooks";
function getItem(label, key, icon, children, type) {
  return {
    key,
    icon,
    children,
    label,
    type,
  };
}

// Component
const Navbar = () => {
  //Hook calls
  const [collapsed, setCollapsed] = useState(false);
  const toggleCollapsed = () => {
    setCollapsed(!collapsed);
  };
  const [rooms, setRooms] = useState([]);

  useEffect(() => {
    if (user) {
      getRoom().then((result) => {
        setRooms(result);
      });
    }
  }, []);

  const items = [
    getItem("Menu principal", "1", <Home />),
    getItem("Vue d'ensemble", "2", <Home />),
    getItem("Chambres", "3", <Home />, [
      rooms.forEach((room, i = 0) => {
        i++;
        getItem(room.name, `sub${i}`, <Home />);
      }),
    ]),
  ];

  // Rendering
  return (
    <div
      style={{
        width: 256,
      }}
    >
      <Button
        type="primary"
        onClick={toggleCollapsed}
        style={{
          marginBottom: 16,
        }}
      >
        {collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
      </Button>
      <Menu
        defaultSelectedKeys={["1"]}
        defaultOpenKeys={["sub1"]}
        mode="inline"
        theme="dark"
        inlineCollapsed={collapsed}
        items={items}
      />
    </div>
  );
};
export default Navbar;