import { FC, useState } from "react";
import {
  Box,
  Grid,
  Typography,
  List,
  ListItemButton,
  ListItemIcon,
  ListItemText,
  ListItemSecondaryAction,
  Drawer,
  Collapse,
} from "@mui/material";
import {
  FeaturedPlayList as FeaturedPlayListIcon,
  Person as PersonIcon,
  Analytics as AnalyticsIcon,
  Logout as LogoutIcon,
  Cottage as CottageIcon,
  Settings as SettingsIcon,
} from "@mui/icons-material";
import { useRouter } from "next/router";
import Link from "next/link";
import Image from "next/image";
import LinkLogo from "public/link-logo-small.png";

const openWidth = 270;
const closedWidth = 100;

const MenuItem = ({
  name,
  href,
  Icon,
  iconSize,
  inset = false,
  selected = false,
  badge,
}: any) => (
  <Link href={href}>
    <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,
          }}
        >
          <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>
      )}
      <ListItemText
        inset={inset}
        primary={
          <Typography
            variant="body1"
            sx={{
              fontSize: 16,
              fontFamily: "Roboto",
              fontWeight: "bold",
              border: 0,
              textAlign: "left",
            }}
          >
            {name}
          </Typography>
        }
      />
      {badge && (
        <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>
      )}
    </ListItemButton>
  </Link>
);

interface SidebarProps {
  open: boolean;
}

export const Sidebar: FC<SidebarProps> = ({ open }) => {
  const { pathname } = useRouter();
  console.log({ pathname });
  return (
    <Drawer
      sx={{ width: open ? openWidth : closedWidth, flexShrink: 0 }}
      variant="permanent"
      anchor="left"
      open={open}
      PaperProps={{
        sx: {
          width: open ? openWidth : closedWidth,
          border: 0,
        },
      }}
    >
      <Grid
        container
        direction="column"
        justifyContent="space-between"
        wrap="nowrap"
        sx={{ backgroundColor: "#25272A", height: "100%", p: 2 }}
      >
        <Grid item container>
          <Grid item>
            <Box sx={{ width: "40px", height: "40px" }}>
              <Image
                src={LinkLogo}
                alt="Link logo"
                width={40}
                height={40}
                style={{
                  objectFit: "cover",
                  filter: "grayscale(100) brightness(100)",
                }}
              />
            </Box>
            .
          </Grid>
          <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" }}
          >
            Hello
          </Typography>
        </Grid>
        <Grid item>
          <Typography
            variant="h2"
            sx={{ fontSize: 22, color: "white", mb: 1.5, fontWeight: "bold" }}
          >
            Nicholas
          </Typography>
        </Grid>
        <Grid item>
          <Box
            sx={{ height: "0.5px", width: "100%", backgroundColor: "#666" }}
          />
        </Grid>
        <Grid item container direction="column" sx={{ mt: "6px" }} 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("/")}
            />
            <MenuItem
              name="Tickets"
              href="/tickets/assigned"
              Icon={FeaturedPlayListIcon}
              selected={pathname.startsWith("/tickets")}
              iconSize={20}
            />

            <Collapse
              in={pathname.startsWith("/tickets")}
              timeout="auto"
              unmountOnExit
              onClick={undefined}
            >
              <List component="div" disablePadding>
                <MenuItem
                  name="Assigned"
                  href="/tickets/assigned"
                  Icon={FeaturedPlayListIcon}
                  iconSize={0}
                  selected={pathname.endsWith("/tickets/assigned")}
                  badge={3}
                />
                <MenuItem
                  name="Urgent"
                  href="/tickets/urgent"
                  Icon={FeaturedPlayListIcon}
                  iconSize={0}
                  selected={pathname.endsWith("/tickets/urgent")}
                  badge={1}
                />
                <MenuItem
                  name="Pending"
                  href="/tickets/pending"
                  Icon={FeaturedPlayListIcon}
                  iconSize={0}
                  selected={pathname.endsWith("/tickets/pending")}
                  badge={9}
                />
                <MenuItem
                  name="Unassigned"
                  href="/tickets/unassigned"
                  Icon={FeaturedPlayListIcon}
                  iconSize={0}
                  selected={pathname.endsWith("/tickets/unnassigned")}
                  badge={27}
                />
                <MenuItem
                  name="New Ticket UI"
                  href="/tickets/181"
                  Icon={SettingsIcon}
                  iconSize={0}
                  selected={pathname.endsWith("/tickets/181")}
                />
              </List>
            </Collapse>

            <MenuItem
              name="Leafcutter"
              href="/leafcutter"
              Icon={AnalyticsIcon}
              iconSize={20}
              selected={pathname.endsWith("/leafcutter")}
            />
            <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")}
                />

                <MenuItem
                  name="Search and Create"
                  href="/leafcutter/create"
                  iconSize={0}
                  selected={pathname.endsWith("/leafcutter/create")}
                />

                <MenuItem
                  name="Trends"
                  href="/leafcutter/trends"
                  iconSize={0}
                  selected={pathname.endsWith("/leafcutter/trends")}
                />

                <MenuItem
                  name="FAQ"
                  href="/leafcutter/faq"
                  iconSize={0}
                  selected={pathname.endsWith("/leafcutter/faq")}
                />

                <MenuItem
                  name="About"
                  href="/leafcutter/about"
                  Icon={AnalyticsIcon}
                  iconSize={0}
                  selected={pathname.endsWith("/leafcutter/about")}
                />
              </List>
            </Collapse>
            <MenuItem
              name="Profile"
              href="/profile"
              Icon={PersonIcon}
              iconSize={20}
              selected={pathname.endsWith("/profile")}
            />
            <MenuItem
              name="Admin"
              href="/admin/zammad"
              Icon={SettingsIcon}
              iconSize={20}
            />
            <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")}
                />
                <MenuItem
                  name="Metamigo"
                  href="/admin/metamigo"
                  Icon={FeaturedPlayListIcon}
                  iconSize={0}
                  selected={pathname.endsWith("/admin/metamigo")}
                />
                <MenuItem
                  name="Label Studio"
                  href="/admin/label-studio"
                  Icon={FeaturedPlayListIcon}
                  iconSize={0}
                  selected={pathname.endsWith("/admin/label-studio")}
                />
              </List>
            </Collapse>

            <MenuItem
              name="Logout"
              href="/logout"
              Icon={LogoutIcon}
              iconSize={20}
            />
          </List>
        </Grid>
      </Grid>
    </Drawer>
  );
};