"use client";

import { FC, useEffect, useState } from "react";
import useSWR from "swr";
import {
  Box,
  Grid,
  Typography,
  List,
  ListItemButton,
  ListItemIcon,
  ListItemText,
  ListItemSecondaryAction,
  Drawer,
  Collapse,
} from "@mui/material";
import {
  FeaturedPlayList as FeaturedPlayListIcon,
  Person as PersonIcon,
  Insights as InsightsIcon,
  Logout as LogoutIcon,
  Cottage as CottageIcon,
  Settings as SettingsIcon,
  ExpandCircleDown as ExpandCircleDownIcon,
  Dvr as DvrIcon,
  Assessment as AssessmentIcon,
  LibraryBooks as LibraryBooksIcon,
  School as SchoolIcon,
  Search as SearchIcon,
} from "@mui/icons-material";
import { usePathname } from "next/navigation";
import Link from "next/link";
import Image from "next/image";
import LinkLogo from "public/link-logo-small.png";
import { useSession, signOut } from "next-auth/react";
import { getTicketOverviewCountsQuery } from "app/_graphql/getTicketOverviewCountsQuery";
import { SearchBox } from "./SearchBox";

const openWidth = 270;
const closedWidth = 100;

const MenuItem = ({
  name,
  href,
  Icon,
  iconSize,
  inset = false,
  selected = false,
  open = true,
  badge,
  target = "_self",
}: any) => (
  <Link href={href} target={target}>
    <ListItemButton
      sx={{
        p: 0,
        mb: 1,
        bl: iconSize === 0 ? "1px solid white" : "inherit",
      }}
      selected={selected}
    >
      {iconSize > 0 ? (
        <ListItemIcon
          sx={{
            color: `white`,
            minWidth: 0,
            mr: 2,
            textAlign: "center",
            margin: open ? "0 8 0 0" : "0 auto",
          }}
        >
          <Box
            sx={{
              width: iconSize,
              height: iconSize,
              mr: 0.5,
              mt: "-4px",
            }}
          >
            <Icon />
          </Box>
        </ListItemIcon>
      ) : (
        <Box
          sx={{
            width: 30,
            height: "28px",
            position: "relative",
            ml: "9px",
            mr: "1px",
          }}
        >
          <Box
            sx={{
              width: "1px",
              height: "56px",
              backgroundColor: "white",
              position: "absolute",
              left: "3px",
              top: "-10px",
            }}
          />
          <Box
            sx={{
              width: "42px",
              height: "42px",
              position: "absolute",
              top: "-27px",
              left: "3px",
              border: "solid 1px #fff",
              borderColor: "transparent transparent transparent #fff",
              borderRadius: "60px",
              rotate: "-35deg",
            }}
          />
        </Box>
      )}
      {open && (
        <ListItemText
          inset={inset}
          primary={
            <Typography
              variant="body1"
              sx={{
                fontSize: 16,
                fontFamily: "Roboto",
                fontWeight: "bold",
                border: 0,
                textAlign: "left",
                color: "white",
              }}
            >
              {name}
            </Typography>
          }
        />
      )}
      {badge && badge > 0 ? (
        <ListItemSecondaryAction>
          <Typography
            color="textSecondary"
            variant="body1"
            className="badge"
            sx={{
              backgroundColor: "#FFB620",
              color: "black !important",
              borderRadius: 10,
              px: 1,
              fontSize: 12,
              fontWeight: "bold",
            }}
          >
            {badge}
          </Typography>
        </ListItemSecondaryAction>
      ) : null}
    </ListItemButton>
  </Link>
);

interface SidebarProps {
  open: boolean;
  setOpen: (open: boolean) => void;
}

export const Sidebar: FC<SidebarProps> = ({ open, setOpen }) => {
  const pathname = usePathname();
  const { data: session } = useSession();
  const username = session?.user?.name || "User";
  // @ts-ignore
  const roles = session?.user?.roles || [];
  const { data: overviewData, error: overviewError }: any = useSWR(
    {
      document: getTicketOverviewCountsQuery,
    },
    { refreshInterval: 10000 },
  );
  console.log({ overviewData });
  const findOverviewCountByID = (id: number) =>
    overviewData?.ticketOverviews?.edges?.find((overview: any) =>
      overview.node.id.endsWith(`/${id}`),
    )?.node?.ticketCount ?? 0;
  const recentCount = 0;
  const assignedCount = findOverviewCountByID(1);
  const openCount = findOverviewCountByID(5);
  const urgentCount = findOverviewCountByID(7);
  const unassignedCount = findOverviewCountByID(2);

  const logout = () => {
    signOut({ callbackUrl: "/login" });
  };

  return (
    <Drawer
      sx={{ width: open ? openWidth : closedWidth, flexShrink: 0 }}
      variant="permanent"
      anchor="left"
      open={open}
      PaperProps={{
        sx: {
          width: open ? openWidth : closedWidth,
          border: 0,
          overflow: "visible",
        },
      }}
    >
      <Box
        sx={{
          position: "absolute",
          top: 20,
          right: open ? -8 : -16,
          color: "#1C75FD",
          rotate: open ? "90deg" : "-90deg",
        }}
        onClick={() => {
          setOpen!(!open);
        }}
      >
        <ExpandCircleDownIcon
          sx={{
            width: 30,
            height: 30,
            background: "white",
            borderRadius: 500,
          }}
        />
      </Box>
      <Grid
        container
        direction="column"
        justifyContent="space-between"
        wrap="nowrap"
        spacing={0}
        sx={{ backgroundColor: "#25272A", height: "100%", p: 2 }}
      >
        <Grid item container>
          <Grid item sx={{ width: open ? "40px" : "100%" }}>
            <Box
              sx={{
                width: "40px",
                height: "40px",
                margin: open ? "0" : "0 auto",
              }}
            >
              <Image
                src={LinkLogo}
                alt="Link logo"
                width={40}
                height={40}
                style={{
                  objectFit: "cover",
                  filter: "grayscale(100) brightness(100)",
                }}
              />
            </Box>
            .
          </Grid>
          {open && (
            <Grid item>
              <Typography
                variant="h2"
                sx={{
                  fontSize: 26,
                  color: "white",
                  fontWeight: 700,
                  mt: 1,
                  ml: 0.5,
                  fontFamily: "Poppins",
                }}
              >
                CDR Link
              </Typography>
            </Grid>
          )}
        </Grid>
        <Grid item>
          <Box
            sx={{
              height: "0.5px",
              width: "100%",
              backgroundColor: "#666",
              mb: 1,
            }}
          />
        </Grid>
        <Grid item>
          <Typography
            variant="h6"
            sx={{
              fontSize: 12,
              color: "#999",
              fontWeight: "bold",
              textAlign: open ? "left" : "center",
            }}
          >
            Hello
          </Typography>
        </Grid>
        <Grid item>
          <Typography
            variant="h2"
            sx={{
              fontSize: 22,
              color: "white",
              mb: 1.5,
              fontWeight: "bold",
              textAlign: open ? "left" : "center",
            }}
          >
            {open
              ? username
              : username
                  .split(" ")
                  .map((name) => name.substring(0, 1))
                  .join("")}
          </Typography>
        </Grid>
        <Grid item>
          <Box
            sx={{
              height: "0.5px",
              width: "100%",
              backgroundColor: "#666",
              mb: 2,
            }}
          />
        </Grid>
        <Grid item>
          <SearchBox />
        </Grid>
        <Grid
          item
          container
          direction="column"
          sx={{
            mt: "6px",
            overflow: "scroll",
            scrollbarWidth: "none",
            msOverflowStyle: "none",
            "&::-webkit-scrollbar": { display: "none" },
          }}
          flexGrow={1}
        >
          <List
            component="nav"
            sx={{
              a: {
                textDecoration: "none",

                ".MuiListItemButton-root": {
                  p: 1,
                  borderRadius: 2,
                  "&:hover": {
                    background: "#555",
                  },
                  ".MuiTypography-root": {
                    p: {
                      color: "#999 !important",
                      fontSize: 16,
                    },
                  },
                  ".badge": {
                    p: { fontSize: 12, color: "black !important" },
                  },
                },
                ".Mui-selected": {
                  background: "#444",
                  color: "#fff !important",
                  ".MuiTypography-root": {
                    p: {
                      color: "#fff !important",
                      fontSize: 16,
                    },
                  },
                  ".badge": {
                    p: { fontSize: 12, color: "black !important" },
                  },
                },
              },
            }}
          >
            <MenuItem
              name="Home"
              href="/"
              Icon={CottageIcon}
              iconSize={20}
              selected={pathname.endsWith("/")}
              open={open}
            />
            <MenuItem
              name="Tickets"
              href="/overview/recent"
              Icon={FeaturedPlayListIcon}
              selected={
                pathname.startsWith("/overview") ||
                pathname.startsWith("/tickets")
              }
              iconSize={20}
              open={open}
            />
            <Collapse
              in={
                pathname.startsWith("/overview") ||
                pathname.startsWith("/tickets")
              }
              timeout="auto"
              unmountOnExit
              onClick={undefined}
            >
              <List component="div" disablePadding>
                <MenuItem
                  name="Recent"
                  href="/overview/recent"
                  Icon={FeaturedPlayListIcon}
                  iconSize={0}
                  selected={pathname.endsWith("/overview/recent")}
                  badge={recentCount}
                  open={open}
                />
                <MenuItem
                  name="Open"
                  href="/overview/open"
                  Icon={FeaturedPlayListIcon}
                  iconSize={0}
                  selected={pathname.endsWith("/overview/open")}
                  badge={openCount}
                  open={open}
                />
                <MenuItem
                  name="Urgent"
                  href="/overview/urgent"
                  Icon={FeaturedPlayListIcon}
                  iconSize={0}
                  selected={pathname.endsWith("/overview/urgent")}
                  badge={urgentCount}
                  open={open}
                />
                <MenuItem
                  name="Assigned"
                  href="/overview/assigned"
                  Icon={FeaturedPlayListIcon}
                  iconSize={0}
                  selected={pathname.endsWith("/overview/assigned")}
                  badge={assignedCount}
                  open={open}
                />
                <MenuItem
                  name="Unassigned"
                  href="/overview/unassigned"
                  Icon={FeaturedPlayListIcon}
                  iconSize={0}
                  selected={pathname.endsWith("/overview/unassigned")}
                  badge={unassignedCount}
                  open={open}
                />
              </List>
            </Collapse>
            <MenuItem
              name="Knowledge Base"
              href="/knowledge"
              Icon={SchoolIcon}
              iconSize={20}
              selected={pathname.endsWith("/knowledge")}
              open={open}
            />
            <MenuItem
              name="Documentation"
              href="/docs"
              Icon={LibraryBooksIcon}
              iconSize={20}
              selected={pathname.endsWith("/docs")}
              open={open}
            />
            <MenuItem
              name="Reporting"
              href="/reporting"
              Icon={AssessmentIcon}
              iconSize={20}
              selected={pathname.endsWith("/reporting")}
              open={open}
            />
            <MenuItem
              name="Leafcutter"
              href="/leafcutter"
              Icon={InsightsIcon}
              iconSize={20}
              selected={false}
              open={open}
            />
            <Collapse
              in={pathname.startsWith("/leafcutter")}
              timeout="auto"
              unmountOnExit
              onClick={undefined}
            >
              <List component="div" disablePadding>
                <MenuItem
                  name="Dashboard"
                  href="/leafcutter"
                  iconSize={0}
                  selected={pathname.endsWith("/leafcutter")}
                  open={open}
                />
                <MenuItem
                  name="Search and Create"
                  href="/leafcutter/create"
                  iconSize={0}
                  selected={pathname.endsWith("/leafcutter/create")}
                  open={open}
                />
                <MenuItem
                  name="Trends"
                  href="/leafcutter/trends"
                  iconSize={0}
                  selected={pathname.endsWith("/leafcutter/trends")}
                  open={open}
                />
                <MenuItem
                  name="FAQ"
                  href="/leafcutter/faq"
                  iconSize={0}
                  selected={pathname.endsWith("/leafcutter/faq")}
                  open={open}
                />

                <MenuItem
                  name="About"
                  href="/leafcutter/about"
                  Icon={InsightsIcon}
                  iconSize={0}
                  selected={pathname.endsWith("/leafcutter/about")}
                  open={open}
                />
              </List>
            </Collapse>
            <MenuItem
              name="Profile"
              href="/profile"
              Icon={PersonIcon}
              iconSize={20}
              selected={pathname.endsWith("/profile")}
              open={open}
            />
            {roles.includes("admin") && (
              <>
                <MenuItem
                  name="Admin"
                  href="/admin/zammad"
                  Icon={SettingsIcon}
                  iconSize={20}
                  open={open}
                />
                <Collapse
                  in={pathname.startsWith("/admin/")}
                  timeout="auto"
                  unmountOnExit
                  onClick={undefined}
                >
                  <List component="div" disablePadding>
                    <MenuItem
                      name="Zammad Settings"
                      href="/admin/zammad"
                      Icon={FeaturedPlayListIcon}
                      iconSize={0}
                      selected={pathname.endsWith("/admin/zammad")}
                      open={open}
                    />
                    {false && roles.includes("metamigo") && (
                      <MenuItem
                        name="Metamigo"
                        href="/admin/metamigo"
                        Icon={FeaturedPlayListIcon}
                        iconSize={0}
                        selected={pathname.endsWith("/admin/metamigo")}
                        open={open}
                      />
                    )}
                    {roles.includes("label_studio") && (
                      <MenuItem
                        name="Label Studio"
                        href="/admin/label-studio"
                        Icon={FeaturedPlayListIcon}
                        iconSize={0}
                        selected={pathname.endsWith("/admin/label-studio")}
                        open={open}
                      />
                    )}
                  </List>
                </Collapse>
              </>
            )}
            <MenuItem
              name="Zammad Interface"
              href="/zammad"
              Icon={DvrIcon}
              iconSize={20}
              open={open}
              target="_blank"
            />
            <MenuItem
              name="Logout"
              href="/logout"
              Icon={LogoutIcon}
              iconSize={20}
              open={open}
              onClick={logout}
            />
          </List>
        </Grid>
      </Grid>
    </Drawer>
  );
};