import { Grid, Paper, Popover, Typography } from "@mui/material";
import React, { useState } from "react";
import Stack from "@mui/material/Stack";
import { styled } from "@mui/material/styles";
import { ProductList, SubListing, SubDescription, ThumbImg } from "./style";
import EastIcon from "@mui/icons-material/East";
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";
import { useSelector } from "react-redux";
import Carousel from "react-material-ui-carousel";

const ProductDrawer = ({ drawer, handleClose, anchor }) => {
  const Item = styled(Paper)(({ theme }) => ({
    padding: theme.spacing(1),
    textAlign: "left",
  }));
  const [activeCategory, setActiveCategory] = useState<number>(0);
  const [activeSubCategory, setActiveSubCategory] = useState<number>(0);
  const [linkIndex, setLinkIndex] = useState<number>(0);
  const [selected, setSelected] = useState<boolean>(false);
  let list = useSelector((state: any) => state.header)?.pageList ?? [];

  const NavigateHandler = (link: any) =>
    window.open(`${link}`, "_blank", "noreferrer");

  return (
    <Popover
      className="GlobalNavigation"
      id="basic-header-product-menu"
      open={drawer}
      anchorEl={anchor}
      onClose={handleClose}
      anchorOrigin={{
        vertical: "bottom",
        horizontal: "left",
      }}
    >
      <Grid container>
        <Grid
          item
          sm={12}
          md={12}
          lg={12}
          xl={9}
          style={{ margin: "auto ", padding: "0 10px" }}
        >
          <Grid container spacing={2}>
            <Grid
              item
              xs={12}
              sm={12}
              md={4}
              lg={3}
              xl={3}
              className="stickyNav"
            >
              <ProductList>
                <Stack spacing={0}>
                  {list?.map((v, i) => (
                    <Item
                      key={v.id}
                      className={i === activeCategory ? "active" : ""}
                      onClick={() => {
                        setActiveCategory(i);
                        setActiveSubCategory(0);
                        setLinkIndex(0);
                      }}
                    >
                      {v.label}
                    </Item>
                  ))}
                </Stack>
              </ProductList>
            </Grid>
            <Grid
              item
              xs={12}
              sm={12}
              md={4}
              lg={6}
              xl={6}
              style={{ position: "relative", paddingBottom: "25px" }}
            >
              <Grid container spacing={1}>
                {list?.[activeCategory]?.children.map((v, i) => (
                  <Grid item xs={12} sm={12} md={12} lg={6} xl={6} key={i}>
                    <SubListing
                      className={i == activeSubCategory ? "active" : ""}
                      onMouseEnter={(e) => {
                        if (!selected) {
                          e.stopPropagation();
                          setActiveSubCategory(i);
                          setLinkIndex(0);
                        }
                      }}
                      onClick={(e) => {
                        setSelected(true);
                        e.stopPropagation();
                        setActiveSubCategory(i);
                        setLinkIndex(0);
                      }}
                    >
                      <Grid
                        container
                        style={{ display: "flex", alignItems: "center" }}
                      >
                        <Grid
                          item
                          xs={2}
                          sm={2}
                          md={2}
                          style={{ textAlign: "center" }}
                        >
                          <img src={v?.icon ?? "/assets/pipes.svg"} />
                        </Grid>
                        <Grid item xs={10} sm={10} md={10}>
                          <Typography variant="h6">{v.label}</Typography>
                          <Typography variant="body2">
                            {v.description}
                          </Typography>
                        </Grid>
                      </Grid>
                    </SubListing>
                  </Grid>
                ))}
              </Grid>
              <Typography
                className="clickLink"
                variant="button"
                display="block"
                onClick={() => NavigateHandler(list[activeCategory]?.link)}
              >
                Click here <EastIcon />
              </Typography>
            </Grid>
            <Grid
              item
              xs={12}
              sm={12}
              md={4}
              lg={3}
              xl={3}
              style={{ position: "relative", paddingBottom: "25px" }}
            >
              <Carousel
                cycleNavigation={true}
                duration={800}
                indicators={false}
                autoPlay={false}
                fullHeightHover={true}
                swipe={true}
                animation="slide"
              >
                {list?.[activeCategory]?.children?.[
                  activeSubCategory
                ]?.children.map((v, i) => {
                  return (
                    <SubDescription>
                      <ThumbImg>
                        <img src={v?.icon} />
                      </ThumbImg>
                      <Typography variant="h6" gutterBottom>
                        {v?.label}
                      </Typography>
                      <Typography variant="body2">{v?.description}</Typography>
                    </SubDescription>
                  );
                })}
              </Carousel>
              <Typography
                className="clickLink"
                variant="button"
                display="block"
                onClick={() =>
                  NavigateHandler(
                    list?.[activeCategory]?.children?.[activeSubCategory]
                      ?.children[linkIndex].link
                  )
                }
              >
                Click here <EastIcon />
              </Typography>
            </Grid>
          </Grid>
        </Grid>
      </Grid>
    </Popover>
  );
};

export default ProductDrawer;