import React, {useEffect, useState} from "react";
import {Menu} from "antd";
import {Link} from "react-router-dom";
import {
    AlipayOutlined,
    AppstoreOutlined,
    DatabaseOutlined,
    FileAddOutlined,
    FileProtectOutlined,
    FileSyncOutlined,
    HomeOutlined,
    MenuUnfoldOutlined,
    MoneyCollectOutlined,
    PayCircleOutlined,
    ProfileOutlined,
    ProjectOutlined,
    ShoppingCartOutlined,
    UserOutlined,
} from "@ant-design/icons";
import {observer} from "mobx-react-lite";
import {useStore} from "../../utils/useStore";
import {LINKS} from "../../routes/app";

const {SubMenu} = Menu;

export const MenuList = observer((props) => {
    const store = useStore();
    useEffect(() => {
    }, []);

    const [setKeys, setSetKeys] = useState(["dashboard"]);

    return (
    <Menu
      defaultOpenKeys={["sub4"]}
      theme="light"
      style={{
        backgroundColor: "transparent",
        borderRightWidth: 0,
        fontWeight: 400,
        paddingLeft: 0,
      }}
      onClick={({ keyPath, item }) => {
        props.closeLeftDrawer();
      }}
      mode="inline"
      selectedKeys={setKeys}
      onSelect={({ setKeys, item, selectedKeys }) => setSetKeys(selectedKeys)}
      overflowedIndicator={0}
      forceSubMenuRender={true}
    >
      <Menu.Item key="home">
        <Link to={LINKS.HOME}>
          <HomeOutlined />
          <span>Home</span>
        </Link>
      </Menu.Item>
      {store.authentication.userData.role !== "Retail" && (
        <Menu.Item key="membership">
          <Link to={LINKS.MEMBERSHIP}>
            <FileProtectOutlined />
            <span>Membership</span>
          </Link>
        </Menu.Item>
      )}
      {store.authentication.userData.role === "Admin" && (
        <SubMenu key="config" icon={<MenuUnfoldOutlined />} title="Config">
          <Menu.Item key="partner">
            <Link to={LINKS.PARTNER}>
              <ProjectOutlined />
              <span>Partner</span>
            </Link>
          </Menu.Item>
          <Menu.Item key="commision">
            <Link to={LINKS.COMMISSION}>
              <MoneyCollectOutlined />
              <span>Commission</span>
            </Link>
          </Menu.Item>
          <Menu.Item key="supplier">
            <Link to={LINKS.SUPPLIER}>
              <AppstoreOutlined />
              <span>Supplier</span>
            </Link>
          </Menu.Item>
        </SubMenu>
      )}
      {store.authentication.userData.role === "Admin" && (
        <SubMenu key="product-main" icon={<ProfileOutlined />} title="Product">
          <Menu.Item key="product">
            <Link to={LINKS.PRODUCT}>
              <DatabaseOutlined />
              <span>Product</span>
            </Link>
          </Menu.Item>
          {store.authentication.userData.role === "Admin" && (
            <Menu.Item key="category">
              <Link to={LINKS.CATEGORY}>
                <FileAddOutlined />
                <span>Category</span>
              </Link>
            </Menu.Item>
          )}
          {store.authentication.userData.role === "Admin" && (
            <Menu.Item key="sub-category">
              <Link to={LINKS.SUBCATEGORY}>
                <FileSyncOutlined />
                <span>Sub Category</span>
              </Link>
            </Menu.Item>
          )}
        </SubMenu>
      )}
      {store.authentication.userData.role === "Supervisor" && (
        <Menu.Item key="retail">
          <Link to={LINKS.PRODUCT}>
            <DatabaseOutlined />
            <span>Product</span>
          </Link>
        </Menu.Item>
      )}
      {store.authentication.userData.role === "Retail" && (
        <Menu.Item key="transaction">
          <Link to={LINKS.TRANSACTION}>
            <ShoppingCartOutlined />
            <span>Transaction</span>
          </Link>
        </Menu.Item>
      )}
      <SubMenu key="payback-main" icon={<ProfileOutlined />} title="Payback">
        {store.authentication.userData.role !== "Retail" && (
          <Menu.Item key="payback-to-user">
            <Link to={LINKS.PAYBACK}>
              <PayCircleOutlined />
              <span>Payback To</span>
            </Link>
          </Menu.Item>
        )}
        {store.authentication.userData.role !== "Admin" && (
          <Menu.Item key="payback-from-user">
              <Link to={LINKS.PAYBACK_FROM_USER}>
                  <AlipayOutlined/>
                  <span>Payback</span>
              </Link>
          </Menu.Item>
        )}
      </SubMenu>
      {store.authentication.userData.role !== "Admin" && (
        <Menu.Item key="profile">
          <Link to={LINKS.PROFILE}>
            <UserOutlined />
            <span>Profile</span>
          </Link>
        </Menu.Item>
      )}
      {/*<Menu.Item key="about">*/}
      {/*	<Link to={'/app/about'}>*/}
      {/*		<CalendarOutlined/>*/}
      {/*		<span>About</span>*/}
      {/*	</Link>*/}
      {/*</Menu.Item>*/}
      <Menu.Divider style={{ background: "transparent", paddingTop: 15 }} />
    </Menu>
  );
});