import React, { Suspense } from "react";
import "./index.less";
import {
  VideoCameraAddOutlined,
  UserSwitchOutlined,
  AuditOutlined,
} from "@ant-design/icons";
import { Layout, Menu, MenuProps, Spin, theme } from "antd";
import { Route, Routes, useNavigate } from "react-router-dom";
import { Guard } from "../router/Guard";
import { navMenuList, navRoutes, sideMenuRoutes } from "../router";

const navMenus: MenuProps["items"] = navMenuList;

const sideMenus: MenuProps["items"] = [
  {
    key: "course",
    icon: <VideoCameraAddOutlined />,
    label: "课程",
    children: [
      {
        key: "create",
        label: "创建",
      },
      {
        key: "library",
        label: "视频库",
      },
    ],
  },
  {
    key: "user",
    icon: <UserSwitchOutlined />,
    label: "用户",
  },
  {
    key: "xcode",
    icon: <AuditOutlined />,
    label: "神秘代码",
  },
];

const { Header, Sider, Content } = Layout;

const Index: React.FC = () => {
  const {
    token: { colorBgContainer },
  } = theme.useToken();

  const navigate = useNavigate();

  const onClickNavMenuItem = (p: any) => {
    navigate(p.key);
  };

  const onClickSideMenuItem = (p: any) => {
    const path = p.keyPath.reverse().join("/");
    navigate(path.startsWith("/") ? path : "/" + path);
  };

  return (
    <div className="container">
      <header>
        <div className="logo">
          <svg
            fill="currentColor"
            className="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path d="M158.165333 499.498667A42.496 42.496 0 0 0 170.666667 469.333333V256a42.666667 42.666667 0 0 1 42.666666-42.666667 42.666667 42.666667 0 0 0 0-85.333333C142.762667 128 85.333333 185.429333 85.333333 256v195.669333l-30.165333 30.165334a42.666667 42.666667 0 0 0 0 60.330666l30.165333 30.165334V768c0 70.570667 57.429333 128 128 128a42.666667 42.666667 0 0 0 0-85.333333 42.666667 42.666667 0 0 1-42.666666-42.666667v-213.333333a42.496 42.496 0 0 0-12.501334-30.165334L145.664 512l12.501333-12.501333zM978.090667 495.658667a42.709333 42.709333 0 0 0-9.258667-13.824L938.666667 451.669333V256c0-70.570667-57.429333-128-128-128a42.666667 42.666667 0 1 0 0 85.333333 42.666667 42.666667 0 0 1 42.666666 42.666667v213.333333a42.581333 42.581333 0 0 0 12.501334 30.165334l12.501333 12.501333-12.501333 12.501333A42.496 42.496 0 0 0 853.333333 554.666667v213.333333a42.666667 42.666667 0 0 1-42.666666 42.666667 42.666667 42.666667 0 1 0 0 85.333333c70.570667 0 128-57.429333 128-128v-195.669333l30.165333-30.165334a42.709333 42.709333 0 0 0 9.258667-46.506666zM669.738667 225.450667a42.752 42.752 0 0 0-69.546667 14.762666l-255.829333 512a42.624 42.624 0 0 0 23.893333 55.424 42.922667 42.922667 0 0 0 55.552-23.765333l255.786667-512a42.538667 42.538667 0 0 0-9.813334-46.421333z"></path>
          </svg>
          <span>Backset</span>
        </div>
        <Menu
          theme="dark"
          mode="horizontal"
          defaultSelectedKeys={["/"]}
          style={{ flex: 1 }}
          items={navMenus}
          onClick={onClickNavMenuItem}
        />
      </header>
      <aside>
        <Sider width={200} style={{ background: colorBgContainer }}>
          <Menu
            mode="inline"
            defaultSelectedKeys={["1"]}
            defaultOpenKeys={["course"]}
            style={{ height: "100%", borderRight: 0 }}
            items={sideMenus}
            onClick={onClickSideMenuItem}
          />
        </Sider>
      </aside>
      <main className="bs-scrollbar">
        <div className="view">
          <Routes>
            {[...navRoutes, ...sideMenuRoutes].map((router) => (
              <Route
                key={router.path}
                path={router.path}
                element={
                  <Suspense fallback={<Spin />}>
                    <Guard>{<router.element />}</Guard>
                  </Suspense>
                }
              />
            ))}
            <Route path="*" element={<span>404</span>} />
          </Routes>
        </div>
      </main>
    </div>
  );
};

export default Index;