import React, { useEffect, useState } from "react";
import { useHistory, Link } from "react-router-dom";

import { Menu, Layout } from "antd";
import { SettingTwoTone } from "@ant-design/icons";

import NewTicket from "./ticket/NewTicket";

const Navigation = () => {
  const history = useHistory();
  const { SubMenu } = Menu;

  const [checkAdmin, setCheckAdmin] = useState(false);
  const [current, setCurrent] = useState();

  function logout() {
    localStorage.clear();
    history.push("/login");
  }

  const handleClick = (e) => {
    setCurrent(e.key);
  };

  function isAdmin() {
    const user = JSON.parse(localStorage.getItem("user"));
    if (user && user.role === "admin") {
      setCheckAdmin(true);
    } else {
      if (!user) {
        history.push("/Login");
      }
    }
  }

  useEffect(() => {
    isAdmin();
  }, []);

  const Render = () => {
    if (checkAdmin) {
      return (
        <div>
          <Layout>
            <Menu
              mode="horizontal"
              onClick={handleClick}
              defaultSelectedKeys={["0"]}
              selectedKeys={current}
            >
              <Menu.Item key="Home Page">
                <a
                  href="https://pmint.dev/"
                  target="_blank"
                  rel="noopener noreferrer"
                >
                  Peppermint 🍵
                </a>
              </Menu.Item>
              <Menu.Item key={0} onClick={() => history.push("/")}>
                Home
              </Menu.Item>
              <SubMenu key="SubMenu" title="Tickets">
                <Menu.Item key="tickets:1">
                  <Link to="/ticket/open">Open Tickets</Link>
                </Menu.Item>
                <Menu.Item key="tickets:2">
                  <Link to="/ticket/unissued">Unissued Tickets</Link>
                </Menu.Item>
              </SubMenu>
              <Menu.Item key={3} onClick={() => history.push("/history")}>
                History
              </Menu.Item>
              <Menu.Item
                key={6}
                onClick={() => history.push("/admin/dashboard")}
              >
                Admin
              </Menu.Item>
              <SubMenu
                key="settings-men"
                icon={<SettingTwoTone />}
                style={{ float: "right" }}
              >
                <Menu.Item key="SETTINGS:1">
                  <Link to="/settings">Settings</Link>
                </Menu.Item>
                <Menu.Item key="SETTINGS:2" onClick={logout}>
                  Log out
                </Menu.Item>
              </SubMenu>
              <Menu.Item key={4} style={{ float: "right" }}>
                <NewTicket />
              </Menu.Item>
            </Menu>
          </Layout>
        </div>
      );
    } else {
      return (
        <div>
          <Layout>
            <Menu
              mode="horizontal"
              onClick={handleClick}
              defaultSelectedKeys={["0"]}
              selectedKeys={current}
            >
              <Menu.Item key="Home Page">
                <a
                  href="https://pmint.dev/"
                  target="_blank"
                  rel="noopener noreferrer"
                >
                  Peppermint 🍵
                </a>
              </Menu.Item>
              <Menu.Item key={0} onClick={() => history.push("/")}>
                Home
              </Menu.Item>
              <SubMenu key="SubMenu" title="Tickets">
                <Menu.Item key="tickets:1">
                  <Link to="/ticket/open">Open Tickets</Link>
                </Menu.Item>
                <Menu.Item key="tickets:2">
                  <Link to="/ticket/unissued">Unissued Tickets</Link>
                </Menu.Item>
              </SubMenu>
              <Menu.Item key={3} onClick={() => history.push("/history")}>
                History
              </Menu.Item>
              <SubMenu
                key="settings-men"
                icon={<SettingTwoTone />}
                style={{ float: "right" }}
              >
                <Menu.Item key="SETTINGS:1">
                  <Link to="/settings">Settings</Link>
                </Menu.Item>
                <Menu.Item key="SETTINGS:2" onClick={logout}>
                  Log out
                </Menu.Item>
              </SubMenu>
              <Menu.Item key={4} style={{ float: "right" }} title="New Ticket">
                <NewTicket />
              </Menu.Item>
            </Menu>
          </Layout>
        </div>
      );
    }
  };

  return (
    <div>
      <Render />
    </div>
  );
};

export default Navigation;