import React, { useEffect, useState } from "react";
import { Menu } from "antd";
import { Link } from "react-router-dom";
import {
  AppstoreOutlined,
  DatabaseOutlined,
  FileAddOutlined,
  FileProtectOutlined,
  FileSyncOutlined,
  HomeOutlined,
  MenuUnfoldOutlined,
  MoneyCollectOutlined,
  ProfileOutlined,
  ProjectOutlined,
  ShoppingCartOutlined,
  UserOutlined,
  AlipayOutlined,
  PayCircleOutlined
} 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">
        <Menu.Item key="payback-to-user">
          <Link to={LINKS.PAYBACK}>
            <PayCircleOutlined />
            <span>Payback To</span>
          </Link>
        </Menu.Item>
        <Menu.Item key="payback-from-user">
          <Link to={LINKS.PAYBACKFROMUSER}>
            <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>
  );
});