import { HStack, Image, Text, VStack } from "@chakra-ui/react";
import React, { FC } from "react";
import { RiNotificationLine } from "react-icons/ri";
import { NavLink, useLocation, useNavigate } from "react-router-dom";
import { nav } from "../Routes/Nav";
import logo from "../assets/logo.svg";
import {
  AccordionItem,
  AccordionItemContent,
  AccordionItemTrigger,
  AccordionRoot,
} from "../components/ui/accordion";
import { Avatar } from "../components/ui/avatar";
import { getTitle } from "../Constants/Constants";

const DefaultLayout: FC<{ children: React.ReactNode }> = ({ children }) => {
  const navigate = useNavigate();
  const location = useLocation();
  const headerTitle = getTitle(location?.pathname);
  console.log(location);

  return (
    <HStack
      position={"relative"}
      bg="#F2F2F2"
      backgroundPosition="center"
      backgroundRepeat="repeat"
      backgroundSize="cover"
      gap={0}
      pt={2}
      w="100%"
      h="100vh"
    >
      <VStack  zIndex={1} gap={0} rounded={"lg"} h="100%" w="15%">
        <HStack w={"100%"} p={3} h={"6.5%"} justifyContent={"center"}>
          <Image w={55} src={logo} />
        </HStack>
        <VStack overflowY="scroll" w={"100%"} p={3}>
          {nav?.map(({ title, path, Icon, type, children, initPath }, index) =>
            type === "single" ? (
              <NavLink
                className="link"
                key={index}
                to={path}
                style={{
                  cursor: "pointer",
                  borderRadius: "8px",
                  padding: "6px",
                  width: "100%",
                  display: "flex",
                  alignItems: "center",
                  gap: 6,
                  border: "1px solid #ffffff",
                  backgroundColor: "#fff",
                  color: "#000",
                  boxShadow: "rgba(99, 99, 99, 0.2) 0px 2px 8px 0px",
                }}
              >
                <Icon
                  style={{
                    fontSize: "20px",
                    backgroundColor: "#fff",
                    width: 28,
                    color: location?.pathname === path ? "#02A0A0" : "#000",
                    padding: 2,
                    borderRadius: "50%",
                  }}
                />{" "}
                <Text fontSize={"xs"} w={"100%"}>
                  {title}
                </Text>
              </NavLink>
            ) : (
              <AccordionRoot bg={"#fff"} rounded={"lg"} collapsible>
                <AccordionItem
                  boxShadow={"rgba(99, 99, 99, 0.2) 0px 2px 8px 0px"}
                  rounded={"lg"}
                  borderBottom={"none"}
                  p={0}
                  key={index}
                  value={title}
                >
                  <AccordionItemTrigger
                    className={`link  ${location?.pathname.startsWith(initPath ?? "") && "active"}`}
                    color={"#fff"}
                    onClick={() => navigate(path)}
                    gap={0}
                    style={{
                      cursor: "pointer",
                      borderRadius: "8px",
                      padding: "5px",
                      width: "100%",
                      display: "flex",
                      alignItems: "center",
                      border: "1px solid #ffffff",
                      backgroundColor: "#fff",
                      color: "#000",
                      fontSize: "14px",
                      fontWeight: "normal",
                    }}
                  >
                    {" "}
                    <Text
                      fontSize={"xs"}
                      gap={1}
                      display={"flex"}
                      alignItems={"center"}
                    >
                      <Icon
                        style={{
                          fontSize: "20px",
                          backgroundColor: "#fff",
                          width: 23,
                          color: location?.pathname.startsWith(initPath ?? "")
                            ? "#02A0A0"
                            : "#000",
                          padding: 2,
                          borderRadius: "50%",
                        }}
                      />
                      {title}
                    </Text>
                  </AccordionItemTrigger>
                  {children?.map(({ title, path, Icon }, index) => (
                    <AccordionItemContent
                      className={`linkChild  ${location?.pathname === path && "activeChild"}`}
                      key={index}
                      onClick={() => navigate(path)}
                      style={{
                        marginTop: 6,
                        cursor: "pointer",
                        borderRadius: "8px",
                        padding: "6px",
                        width: "100%",
                        display: "flex",
                        alignItems: "center",
                        gap: 6,
                        border: "1px solid #ffffff",
                        backgroundColor: "#fff",
                        color: "#000",
                      }}
                    >
                      <Icon style={{ fontSize: "16px" }} />{" "}
                      <Text fontSize={"xs"} w={"100%"}>
                        {title}
                      </Text>
                    </AccordionItemContent>
                  ))}
                </AccordionItem>
              </AccordionRoot>
            )
          )}
        </VStack>
      </VStack>
      <VStack overflowY="hidden" gap={0} h="100%" w="85%">
        <HStack
          h={"6.5%"}
          w={"100%"}
          justifyContent={"space-between"}
          alignItems={"flex-end"}
          pe={3}
          gap={6}
          p={4}
        >
          <Text
            mb={1}
            fontSize={"sm"}
            ms={1}
            fontWeight={600}
            color={"#013e3e"}
          >
            {headerTitle}
          </Text>
          <HStack
            // bg={"#fff"}
            h={"100%"}
            justifyContent={"center"}
            p={2}
            rounded={"md"}
            // boxShadow={"rgba(99, 99, 99, 0.2) 0px 2px 8px 0px"}
          >
            <RiNotificationLine
              color="#013e3e"
              cursor={"pointer"}
              style={{ fontSize: "22px" }}
            />
            <HStack cursor={"pointer"} onClick={() => navigate("/profile")}>
              <Avatar
                size={"sm"}
                src="https://i.pinimg.com/736x/d6/cd/0f/d6cd0ffd4634b0763d3958a7325ce26e.jpg"
              />
              <VStack color={"#013e3e"} gap={0} alignItems={"flex-start"}>
                <Text fontSize={"sm"} fontWeight={"bold"}>
                  Ritesh Pandey
                </Text>
                <Text fontSize={"xs"}>ritesh.pandey@wdimails.com</Text>
              </VStack>
            </HStack>
          </HStack>
        </HStack>
        {children}
      </VStack>
    </HStack>
  );
};

export default DefaultLayout;
