import React, { useContext, useState } from "react";
import logo from "../assets/logo2.png";
import logoMini from "../assets/logo-min.png";
import { useDispatch } from "react-redux";
import { loginUser } from "../Redux/Slice/auth";
import Button02 from "../Components/Buttons/Button02";
import { TbArrowBadgeLeftFilled } from "react-icons/tb";
import { TbArrowBadgeRightFilled } from "react-icons/tb";
import { ArrowBackIcon, ArrowLeftIcon, ArrowRightIcon } from "@chakra-ui/icons";
import {
  Link,
  NavLink,
  Route,
  Routes,
  useLocation,
  useNavigate,
} from "react-router-dom";
import { RouteLink } from "../Routes/Routes";
import NotFound from "../Pages/NotFound";
import { nav } from "../Routes/Nav";
import {
  Avatar,
  Box,
  Button,
  PopoverArrow,
  PopoverBody,
  PopoverCloseButton,
  PopoverContent,
  PopoverFooter,
  PopoverHeader,
  PopoverTrigger,
  Portal,
  Text,
  WrapItem,
  Popover,
  Tag,
} from "@chakra-ui/react";
import GlobalStateContext from "../Contexts/GlobalStateContext";
import Cookies from "js-cookie"; // Import the Cookies library
import Header from "../Components/Header";
import HeaderMain from "../Components/HeaderMain";

const DashboardLayout = () => {
  const navigate = useNavigate();
  const dispach = useDispatch();
  const location = useLocation();
  const path = location.pathname;
  const [isDrawerOpen, setIsDrawerOpen] = useState(false);
  const [openDrawerClick, setOpenDrawerClick] = useState(true);
  const { setIsAuthenticate } = useContext(GlobalStateContext);

  const openDrawerOnClick = () => {
    setOpenDrawerClick(!openDrawerClick);
  };

  const logOutHandler = () => {
    // dispach(loginUser(false));
    setIsAuthenticate(false);
    Cookies.remove("isAuthenticated");
    navigate("/login");
  };

  // // Function to get the title based on the route
  const getTitle = () => {
    switch (path) {
      case "/":
        return "👋🏻 Hi, Admin";
      case "/investment":
        return "Sponsor";
      case "/blogs-articles":
        return "Blogs and Articles";
      case "/videos":
        return "Videos";
      case "/news":
        return "News";
      case "/events":
        return "Events";
      case "/whitepaper":
        return "Whitepaper";
      case "/community/":
        return "Community";
      case "/community":
        return "Community";
      case "/community/view/":
        return "Community";
      case "/community/add-comunity":
        return (
          <Text color={"teal.800"} className="d-flex align-items-center">
            <Link to={"/community/"}>
              <ArrowBackIcon className="me-2 fs-3 link p-1 rounded-1" />
            </Link>
            Community
          </Text>
        );
      default:
        if (path.startsWith("/community/view/")) {
          return (
            <span className="d-flex align-items-center">
              <Link to={"/community/"}>
                <ArrowBackIcon className="me-2 fs-3 link p-1 rounded-1" />
              </Link>
              Community
            </span>
          );
        } else if (path.startsWith("/community/edit/")) {
          return (
            <span className="d-flex align-items-center">
              <Link to={"/community/"}>
                <ArrowBackIcon className="me-2 fs-3 link p-1 rounded-1" />
              </Link>
              Community
            </span>
          );
        }
        return "Tanami";
    }
  };

  return (
    <Box
      style={{
        height: "100vh",
        width: "100vw",
        position: "relative",
        overflow: "hidden",

        // backgroundColor:"#101015"
        // backgroundColor:"#000000"
      }}
      className="d-flex"
      pe={0.5}
    >
      <aside
        className="h-100 position-relative sideBar  pe-1"
        // onMouseOver={() => setIsDrawerOpen(true)}
        // onMouseLeave={() => setIsDrawerOpen(false)}
        style={{
          width: isDrawerOpen || openDrawerClick ? 225 : 70,
          transition: "width 0.3s ease-in-out", // Smooth transition for width change
          overflow: "hidden", // Hide overflow to prevent content overflow during transition
          backgroundColor: "#0041180A",
          // backgroundColor: "#002F0F",
        }}
      >
        <div
          className={`d-flex  ${
            isDrawerOpen || openDrawerClick
              ? "justify-content-start"
              : "justify-content-center"
          }  p-3 pt-3 pb-4 position-relative `}
          height={"10%"}
        >
          {isDrawerOpen || openDrawerClick ? (
            <img
              style={{
                width: 120,
              }}
              src={logo}
              alt="Logo"
            />
          ) : (
            <img
              style={{
                width: 30,
              }}
              src={logoMini}
              alt="Logo"
            />
          )}
        </div>

        <div
          className="ps-2  scroll-bar "
          style={{ height: "80%", overflowY: "scroll", overflowX: "hidden" }}
        >
          {nav.map(({ title, path, Icon }, index) => (
            <Box
              // color={"whitesmoke"}
              color={"gray.600"}
              key={index}
              className=" mb-1 w-100 d-flex  "
            >
              {path ? (
                <NavLink
                  style={{
                    height: "auto",
                  }}
                  className={`${
                    isDrawerOpen || openDrawerClick
                      ? "p-1 web-text-medium ps-3"
                      : "p-2 ps-1 web-text-xlarge justify-content-center"
                  }  rounded-1  link  d-flex align-items-center gap-2 w-100   `}
                  to={path}
                >
                  <span
                    style={{
                      display:
                        isDrawerOpen || openDrawerClick ? "flex" : "flex",
                      alignItems: "center",
                      paddingBottom: 0,
                    }}
                  >
                    <Icon className="web-text-large" />
                  </span>
                  <span
                    style={{
                      display:
                        isDrawerOpen || openDrawerClick ? "flex" : "none",
                      alignItems: "center",
                      padding: 3,
                      overflow: "hidden",
                    }}
                  >
                    {title}
                  </span>
                </NavLink>
              ) : (
                <span
                  className="web-text-xxsmall fw-600 mt-1 text-secondary fw-bold"
                  // style={{ textDecoration: "underline" }}
                >
                  {title}
                </span>
              )}
            </Box>
          ))}
        </div>

        {/* <section
          className="d-flex justify-content-center border-top  p-2 "
          style={{
            position: "absolute",
            left: 0,
            bottom: 0,
            width: "100%",
          }}
        >
          <Popover placement="top">
            <Portal>
              <PopoverContent maxW="220px" className="ms-2">
                <PopoverArrow />
                <PopoverBody className="web-text-medium pointer link">
                  Profile
                </PopoverBody>
                <Link to={"/help-and-support"}>
                  <PopoverBody className="web-text-medium pointer ">
                    Help & Support
                  </PopoverBody>
                </Link>
                <PopoverFooter
                  onClick={logOutHandler}
                  className="web-text-medium pointer link"
                >
                  Log Out
                </PopoverFooter>
              </PopoverContent>
            </Portal>
            <PopoverTrigger>
              <Box
                // onClick={logOutHandler}
                className="d-flex pointer  align-items-center"
              >
                <Avatar
                  size="xs"
                  name="Dan Abrahmov"
                  src="https://bit.ly/dan-abramov"
                />
                <Box
                  color={"whitesmoke"}
                  style={{
                    opacity: isDrawerOpen || openDrawerClick ? 1 : 0,
                    display: isDrawerOpen || openDrawerClick ? "flex" : "none",
                    transition: "opacity 0.3s ease-in-out",
                  }}
                  className=" overflow-hidden ms-3  flex-column "
                >
                  <Text as={"span"} className="web-text-small">
                    Hello, developer admin
                  </Text>
                  <Text as={"span"} className="web-text-xsmall">
                    siddhesh@rubix.com
                  </Text>
                </Box>
              </Box>
            </PopoverTrigger>
          </Popover>
        </section> */}
      </aside>

      <main
        className={`h-100   ${path === "/" ? "ps-0" : "ps-3"}  `}
        style={{
          width: `calc(100% - ${isDrawerOpen || openDrawerClick ? 225 : 70}px)`,
          transition: "width 0.3s ease-in-out",
          position: "relative",
          // boxShadow:
          //   "rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset",
        }}
      >
        <Button
          colorScheme={"forestGreen"}
          rounded={"lg"}
          // onMouseOver={() => setIsDrawerOpen(true)}
          // onMouseLeave={() => setIsDrawerOpen(false)}
          onClick={openDrawerOnClick}
          style={{
            width: 18,
            height: 26,
            position: "absolute",
            left: -28,
            bottom: 80,
            zIndex: 6,
          }}
        >
          {isDrawerOpen || openDrawerClick ? (
            <ArrowLeftIcon className="web-text-small" />
          ) : (
            <ArrowRightIcon className="web-text-small " />
          )}
        </Button>

        {/* <header className="p-2 ps-0 pt-3 fw-400  border-bottom">
          <span className="fs-5">{getTitle()}</span>
        </header> */}

        <HeaderMain logOutHandler={logOutHandler} icon title={getTitle()} />

        <AppContent />
      </main>
    </Box>
  );
};

export default DashboardLayout;

const AppContent = () => {
  return (
    <Routes>
      {RouteLink.map(({ path, Component }, index) => (
        <Route key={index} path={path} element={<Component />} />
      ))}
      <Route path="*" element={<NotFound />} />
    </Routes>
  );
};