import {
  AuditOutlined,
  BarChartOutlined,
  CloseOutlined,
  FileAddFilled,
  LogoutOutlined,
  MoonOutlined,
  PieChartOutlined,
  SettingFilled,
  SunOutlined
} from "@ant-design/icons";
import { Menu } from "antd";
import React from "react";
import { Link, useLocation } from "react-router-dom";
import { createStructuredSelector } from "reselect";
import ipcTypes from "../../../ipc.types";
import { selectDarkMode } from "../../../redux/user/user.selectors";
import SiderSignOut from "../../molecules/sider-sign-out/sider-sign-out.molecule";
import { connect } from "react-redux";
import { signOutStart, toggleDarkMode } from "../../../redux/user/user.actions";
const { ipcRenderer } = window;

const mapStateToProps = createStructuredSelector({
  darkMode: selectDarkMode
});
const mapDispatchToProps = (dispatch) => ({
  toggleDarkMode: () => dispatch(toggleDarkMode()),
  signOutStart: () => dispatch(signOutStart())
});

export function SiderMenuOrganism({ darkMode, toggleDarkMode, signOutStart }) {
  const { pathname } = useLocation();

  return (
    <Menu
      defaultSelectedKeys={[`/`]}
      selectedKeys={[pathname]}
      onClick={(e) => {
        switch (e.key) {
          case "darkmode":
            toggleDarkMode();
            break;
          case "quit":
            ipcRenderer.send(ipcTypes.quit);
            break;
          case "signout":
            signOutStart();
            break;
          default:
            break;
        }
      }}
      mode="inline"
      items={[
        {
          key: "/",
          icon: <PieChartOutlined />,
          label: <Link to="/">Jobs</Link>
        },
        {
          key: "/scan",
          icon: <FileAddFilled />,
          label: <Link to="/scan">File Scan</Link>
        },
        {
          key: "/reporting",
          icon: <BarChartOutlined />,
          label: <Link to="/reporting">Reporting</Link>
        },
        {
          key: "/audit",
          icon: <AuditOutlined />,
          label: <Link to="/audit">Audit</Link>
        },
        {
          key: "/settings",
          icon: <SettingFilled />,
          label: <Link to="/settings">Settings</Link>
        },
        { type: "divider" },
        {
          key: "signout",
          icon: <LogoutOutlined style={{ color: "tomato" }} />,
          label: "Sign out"
        },
        {
          key: "quit",
          icon: <CloseOutlined style={{ color: "tomato" }} />,
          label: "Quit"
        },
        {
          key: "darkmode",
          icon: darkMode ? <SunOutlined /> : <MoonOutlined />,
          label: darkMode ? "Light Mode" : "Dark Mode"
        }
        // ...(process.env.NODE_ENV !== "production"
        //   ? [
        //       {
        //         key: "/admin",
        //         icon: <AlertOutlined />,
        //         label: <Link to="/admin">ADMIN</Link>
        //       }
        //     ]
        //   : [])
      ]}
    />
  );
}

export default connect(mapStateToProps, mapDispatchToProps)(SiderMenuOrganism);
