import * as React from "react";
import NextLink from "next/link";
import { useRouter as useNextRouter } from "next/router";
import { styled } from "@mui/material/styles";
import Box from "@mui/material/Box";
import MuiDrawer from "@mui/material/Drawer";
import Toolbar from "@mui/material/Toolbar";
import List from "@mui/material/List";
import Divider from "@mui/material/Divider";
import Button from "@mui/material/Button";
import IconButton from "@mui/material/IconButton";
import DatasetIcon from "@mui/icons-material/Dataset";
import ChevronLeftIcon from "@mui/icons-material/ChevronLeft";
import ListItem from "@mui/material/ListItem";
import ListItemButton from "@mui/material/ListItemButton";
import ListItemIcon from "@mui/material/ListItemIcon";
import ListItemText from "@mui/material/ListItemText";
import ListSubheader from "@mui/material/ListSubheader";
import Typography from "@mui/material/Typography";
import useMediaQuery from "@mui/material/useMediaQuery";
import { useTheme } from "@mui/material/styles";
import MuiAccordion, { AccordionProps } from "@mui/material/Accordion";
import MuiAccordionSummary, {
  AccordionSummaryProps,
} from "@mui/material/AccordionSummary";
import MuiAccordionDetails from "@mui/material/AccordionDetails";
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
import ArrowForwardIosSharpIcon from "@mui/icons-material/ArrowForwardIosSharp";

import { DRAWER_WIDTH } from "@/constants";
import LeftNavCfg from "@/config/leftNavCfg.json";
import { string2Hash, scrollToElementIfInView } from "@/utils";

const Drawer = styled(MuiDrawer, {
  // shouldForwardProp: (prop) => prop !== "open",
})(({ theme, open }) => ({
  "& .MuiDrawer-paper": {
    position: "relative",
    whiteSpace: "nowrap",
    width: DRAWER_WIDTH,
    transition: theme.transitions.create("width", {
      easing: theme.transitions.easing.sharp,
      duration: theme.transitions.duration.enteringScreen,
    }),
    // boxSizing: "border-box",
    // ...(!open && {
    //   overflowX: "hidden",
    //   transition: theme.transitions.create("width", {
    //     easing: theme.transitions.easing.sharp,
    //     duration: theme.transitions.duration.leavingScreen,
    //   }),
    //   width: theme.spacing(7),
    //   [theme.breakpoints.up("sm")]: {
    //     width: theme.spacing(9),
    //   },
    // }),
  },
}));

export interface LeftNavProps {
  open: boolean;
  toggleDrawer: () => void;
  items: {
    id: string;
    label: string;
    desc: string | React.ReactNode;
    isDefault?: boolean;
  }[];
}

export default function LeftNav(props: LeftNavProps) {
  const { open, toggleDrawer, items } = props;

  const theme = useTheme();
  const matches = useMediaQuery(theme.breakpoints.down("md"));

  return (
    <>
      {matches ? (
        <Drawer
          variant="temporary"
          open={open}
          anchor="left"
          onClose={toggleDrawer}
        >
          <Toolbar
            sx={{
              display: "flex",
              alignItems: "center",
              justifyContent: "flex-end",
              px: [1],
            }}
          >
            <IconButton onClick={toggleDrawer}>
              <ChevronLeftIcon />
            </IconButton>
          </Toolbar>
          {/* <Divider /> */}
          <List component="nav">
            <ListItems items={items} />
          </List>
        </Drawer>
      ) : (
        <Drawer
          variant="permanent"
          open={true}
          sx={{
            height: "100vh",
          }}
        >
          <Toolbar
            sx={{
              display: "flex",
              alignItems: "center",
              justifyContent: "flex-end",
              px: [1],
            }}
          >
            {/* <IconButton onClick={toggleDrawer}>
              <ChevronLeftIcon />
            </IconButton> */}
          </Toolbar>
          {/* <Divider /> */}
          <List
            component="nav"
            sx={{
              // pl: (theme) => theme.spacing(3),
              overflowY: "auto",
            }}
          >
            <ListItems items={items} />
          </List>
        </Drawer>
      )}
    </>
  );
}

const Accordion = styled((props: AccordionProps) => (
  <MuiAccordion disableGutters elevation={0} {...props} />
))(({ theme, expanded }) => ({
  border: `1px solid ${theme.palette.divider}`,
  "&:not(:last-child)": {
    borderBottom: 0,
  },
  "&:before": {
    display: "none",
  },
  ...(expanded && {
    boxShadow: "0px 4px 4px rgba(0, 0, 0, 0.25)",
    borderTop: "7px solid #0F8CFF",
    transition: "box-shadow 0.5s ease-in-out, border 0.5s ease-in-out",
    "&:first-of-type": {
      borderTopLeftRadius: "8px",
      borderTopRightRadius: "8px",
    },
  }),
}));

const AccordionSummary = styled((props: AccordionSummaryProps) => (
  <MuiAccordionSummary
    // expandIcon={<ArrowForwardIosSharpIcon sx={{ fontSize: '0.9rem' }} />}
    {...props}
  />
))(({ theme }) => ({
  // backgroundColor: "rgba(0, 0, 0, .03)",
  // flexDirection: 'row-reverse',
  "& .MuiAccordionSummary-expandIconWrapper.Mui-expanded": {
    // transform: 'rotate(180deg)',
  },
  "& .MuiAccordionSummary-content": {
    marginLeft: theme.spacing(1),
  },
}));

const AccordionDetails = styled(MuiAccordionDetails)(({ theme }) => ({
  padding: theme.spacing(2),
  borderTop: "1px solid rgba(0, 0, 0, .125)",
}));

function ListItems(props: { items: LeftNavProps["items"] }) {
  const { items } = props;

  const [expanded, setExpanded] = React.useState<string | false>(false);

  const nextRouter = useNextRouter();

  const handleChange =
    (panel: string) => (event: React.SyntheticEvent, isExpanded: boolean) => {
      setExpanded(isExpanded ? panel : false);
      nextRouter.push(`?panel=${panel}`);
    };

  React.useEffect(() => {
    const targetPanel = new URLSearchParams(window.location.search).get('panel') as string;
    if (!expanded && targetPanel) {
      setExpanded(targetPanel);
      // scrollToElementIfInView(targetPanel);
    } else if (
      !expanded && !targetPanel
    ) {
      const defaultPanel = items.find((item) => item.isDefault)?.id;
      const firstPanel = items[0].id;
      nextRouter.push(`?panel=${defaultPanel || firstPanel}`);
      setExpanded(defaultPanel || firstPanel);
    }
  }, []);

  return (
    <>
      {items.map((item) => (
        <ListItem key={item.id}>
          <Box width="inherit">
            <Accordion
              expanded={expanded === item.id}
              onChange={handleChange(item.id)}
            >
              <AccordionSummary
                expandIcon={<ExpandMoreIcon />}
                aria-controls={`${item.id}bh-content`}
                id={`${item.id}bh-header`}
              >
                <Typography
                  sx={{ fontWeight: expanded === item.id ? "bold" : "normal" }}
                >
                  {item.label}
                </Typography>
              </AccordionSummary>
              <AccordionDetails>
                <Typography whiteSpace="break-spaces" variant="body2">
                  {item.desc}
                </Typography>
              </AccordionDetails>
            </Accordion>
          </Box>
        </ListItem>
      ))}
    </>
  );
}