import React from "react";
import { Drawer, Box, List, ListItem, ListItemButton, ListItemText, Accordion, AccordionSummary, AccordionDetails, AccordionActions, Typography, Button } from "@mui/material";
import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
import Grid from '@mui/material/Grid2';
import logoSrc from "../../../../assets/images/amberlogo.png";

const MobileNav = ({ open, onClose, menu = [] }) => {

  // React.useEffect(()=>{

  //   console.log(menu)
  //   debugger

  // },[menu])

  const renderCollectionDisplay = (colletion) => {

    return (
      <Grid
        size={6}
        className="animate__animated animate__fadeIn animate__fast"
        sx={{pr:1, pb:1}}
      >
        <Box
          sx={{
            backgroundImage: `url(${colletion?.image?.url})`,
            backgroundSize: "cover",
            backgroundRepeat: "no-repeat",
            backgroundPosition: "center center",
            paddingTop: "80%",
            position: "relative",
            cursor: "pointer",
            mb:1,
            transition: "transform 0.3s ease",
            ":hover": {
              transform: "scale(1.1)"
            }
          }}
          onClick={() => {
            sessionStorage.setItem('amber-select-collection', JSON.stringify(colletion))
            window.location.href = `/products`;
          }}
        >
        </Box>
        <Typography
          variant="body2"
          sx={{
            color: "black",
            fontSize: {
              xs: "0.73rem",
              sm: "0.73rem",
              md: "0.875rem",
            },
          }}
        >
          {colletion?.title?.toUpperCase()}
        </Typography>
      </Grid>

    )

  }

  return (
    <Drawer
      open={open}
      onClose={onClose}
      sx={{
        "& .MuiDrawer-paper": {
          backgroundColor: "white",
          color: "white",
          width: "100%",
        },
      }}
    >
      {/* Logo Section */}
      <Box sx={{ height: 80, px: 2 }}>
        <Grid
          container
          alignItems="center"
          justifyContent="space-between"
          sx={{ height: "100%" }}
        >
          {/* Left Spacer */}
          <Grid item xs={3} />

          {/* Centered Logo */}
          <Grid item xs={6} container justifyContent="center">
            <a href="/">
              <img
                src={logoSrc}
                alt="Logo"
                style={{
                  width: 150,
                  height: 25,
                }}
              />
            </a>
          </Grid>

          {/* Right 'X' Button */}
          <Grid item xs={3} container justifyContent="flex-end">
            <button
              onClick={() => { onClose() }}
              style={{
                background: "none",
                border: "none",
                fontSize: 24,
                cursor: "pointer",
              }}
            >
              &#x2715; {/* Unicode for "X" symbol */}
            </button>
          </Grid>
        </Grid>
      </Box>


      {/* Main Navigation */}
      <Box sx={{ width: "100%" }} role="presentation">
        {menu.map(({ productType, collection }) => (
          <Accordion
            disableGutters={true}
            onClick={() => {
              sessionStorage.setItem('amber-select-product-type', productType)
              if (collection?.length == 0) {
                window.location.href = `/products`;
                sessionStorage.removeItem('amber-select-collection')
              }
            }}
            sx={{
              backgroundColor: "rgba(0,0,0,0)",
              boxShadow: "none"
            }}>
            <AccordionSummary
              expandIcon={(collection?.length > 0) ? <ExpandMoreIcon /> : ""}
              aria-controls="panel1-content"
              id="panel1-header"
            >
              <Typography
                onClick={() => {
                  sessionStorage.setItem('amber-select-product-type', productType)
                  window.location.href = `/products`;
                  sessionStorage.removeItem('amber-select-collection')
                }}
                variant="body1"
                sx={{
                  fontSize: {
                    xs: "0.73rem",
                    sm: "0.73rem",
                    md: "0.875rem",
                  },
                }}
              >
                {productType?.toUpperCase()}
              </Typography>
            </AccordionSummary>
            <AccordionDetails>
              {(collection?.length > 0) &&
                <Grid container sx={{ maxHeight: "1000px", overflow: "scroll", overflowX: "hidden" }}>
                  {collection?.map((colletion) => {
                    return renderCollectionDisplay(colletion)
                  })}
                </Grid>
              }
            </AccordionDetails>
          </Accordion>
        ))}

      </Box>
    </Drawer>
  );
};

export default MobileNav;
