import {
  AppstoreOutlined,
  LogoutOutlined,
  SnippetsOutlined,
} from "@ant-design/icons";
import { Badge, Divider, Menu } from "antd";
import Sider from "antd/es/layout/Sider";
import { useContext, useEffect, useState } from "react";
import { useLocation, useNavigate } from "react-router-dom";
import PropTypes from "prop-types";
import {
  Constants,
  MyAvatar,
  UseUserSession,
  WebSocketContext,
} from "../../utils";

export default function SideMenu({ setUserSession }) {
  const { userSession } = UseUserSession();
  const location = useLocation();
  const [selectedKeys, setSelectedKeys] = useState("/");
  const webSocketContext = useContext(WebSocketContext);

  useEffect(() => {
    const pathName = location.pathname;
    setSelectedKeys(pathName);
  }, [location.pathname]);

  const navigate = useNavigate();
  return (
    <Sider
      theme="light"
      style={{ overflow: "auto", position: "fixed", height: "100vh" }}
    >
      <div
        style={{
          display: "flex",
          justifyContent: "space-between",
          flexDirection: "column",
          height: "100%",
        }}
      >
        <div>
          <div className="CompanyNameContainer">
            <span>J</span>
            <span>A</span>
            <span>N</span>
            <span>E</span>
            <span>X</span>
          </div>
          <div className="Subtitle">Admin Dashboard</div>
          <Menu
            mode="vertical"
            onClick={(item) => {
              navigate(item.key);
            }}
            theme="light"
            selectedKeys={[selectedKeys]}
            items={[
              {
                label: "Dashboard",
                icon: <AppstoreOutlined />,
                key: "/",
              },
              {
                label: "Group Tasks",
                icon: <SnippetsOutlined />,
                key: "/group-tasks",
              },
            ]}
          />
        </div>
        <div>
          <Divider />
          <Menu
            selectable={false}
            mode="vertical"
            onClick={(item) => navigate(item.key)}
            items={[
              {
                icon: (
                  <Badge
                    status={webSocketContext.ConnectionBadgeStatus}
                    text={`${webSocketContext.ConnectedWebSocketUsersCount} ${
                      webSocketContext.ConnectedWebSocketUsersCount === 1
                        ? "user"
                        : "users"
                    }  connected`}
                  />
                ),
                key: "/users",
              },
              {
                label: " " + webSocketContext.User.Username,
                icon: (
                  <MyAvatar
                    allUsers={webSocketContext.AllUsers}
                    userId={webSocketContext.User.Id}
                  />
                ),
                key: "/user-profile",
              },
              {
                label: "Logout",
                icon: <LogoutOutlined />,
                onClick: () => {
                  setUserSession();
                  window.location.href = "/";

                  fetch(`${Constants.API_ADDRESS}/user/auth/logout`, {
                    method: "DELETE",
                    headers: {
                      "Content-Type": "application/json",
                      "X-Authorization": userSession,
                    },
                  }).catch(console.error);
                },
                key: "/",
              },
            ]}
          />
        </div>
      </div>
    </Sider>
  );
}

SideMenu.propTypes = {
  setUserSession: PropTypes.func.isRequired,
};