import { Affix, Col, Menu, Row, type MenuProps } from "antd";
import {
  FileSearchOutlined,
  AlertOutlined,
  CarryOutOutlined,
  SettingOutlined,
  FileProtectOutlined,
} from "@ant-design/icons";
import Box from "../components/Box";
import { useState } from "react";
import VqdTaskPage from "../components/VqdTask";
import VqdTaskTemplatePage from "../components/VqdTaskTemplate";
import VqdTimeTemplatePage from "../components/VqdTimeTemplate";
import VqdAlarmPage from "../components/VqdAlarm";
import VqdConfigPage from "../components/VqdConfig";

type MenuItem = Required<MenuProps>["items"][number];
export default function Home() {
  const [currentMenu, setCurrentMenu] = useState("sub0");

  const items: MenuItem[] = [
    {
      key: "sub0",
      label: "设备视频诊断",
      icon: <FileSearchOutlined />,
    },
    {
      key: "sub1",
      label: "诊断结果查询",
      icon: <AlertOutlined />,
    },
    {
      key: "sub2",
      label: "诊断计划",
      icon: <CarryOutOutlined />,
    },
    {
      key: "sub3",
      label: "诊断参数",
      icon: <FileProtectOutlined />,
    },
    {
      key: "sub4",
      label: "基础配置",
      icon: <SettingOutlined />,
    },
  ];

  const onClickMenu = (item: any) => {
    setCurrentMenu(item?.key as string);
  };

  return (
    <Row gutter={16}>
      <div>
        <Affix className="hidden lg:block" offsetTop={0}>
          <Box
            style={{ minWidth: "10rem", width: "12rem" }}
            className="mr-0 px-0"
          >
            <Menu
              className="litegbs-menu-item select-none"
              key={"config"}
              selectedKeys={[currentMenu]}
              onClick={onClickMenu}
              items={items}
            />
          </Box>
        </Affix>
        <Box
          style={{ minWidth: "10rem", width: "12rem" }}
          className="mr-0 px-0 block lg:hidden"
        >
          <Menu
            className="litegbs-menu-item"
            key={"config"}
            selectedKeys={[currentMenu]}
            onClick={onClickMenu}
            items={items}
          />
        </Box>
      </div>
      <Col sm={24} md={24} lg={18} xl={18} xxl={18} className="w-full">
        {/* <Col sm={24} md={24}  className="w-full"> */}
        {currentMenu == "sub0" && (
          <Box>
            <VqdTaskPage />
          </Box>
        )}
        {currentMenu == "sub1" && (
          <Box>
            <VqdAlarmPage />
          </Box>
        )}
        {currentMenu == "sub2" && (
          <Box>
            <VqdTimeTemplatePage />
          </Box>
        )}
        {currentMenu == "sub3" && (
          <Box>
            <VqdTaskTemplatePage />
          </Box>
        )}
        {currentMenu == "sub4" && (
          <Box>
            <VqdConfigPage />
          </Box>
        )}
      </Col>
    </Row>
  );
}
