import React, { useState } from "react";
import { Box, VStack, Link, Stack, Text, Image, Flex } from "@chakra-ui/react";
import { Link as RouterLink } from "react-router-dom";
import { MdDashboard } from "react-icons/md";
import logo from "../../public/images/logo/logo.png";
import { FaChevronUp } from "react-icons/fa";
import { FaChevronDown } from "react-icons/fa";
import { IoDocumentTextOutline } from "react-icons/io5";
import { FiEdit } from "react-icons/fi";
import { FaRegUser } from "react-icons/fa";
import { IoBag } from "react-icons/io5";
import { MdGroups } from "react-icons/md";
import { BiSupport } from "react-icons/bi";
import { GiDatabase } from "react-icons/gi";

const Sidebar = () => {
  const [activeSection, setActiveSection] = useState("dashboard");

  const toggleSection = (section) => {
    setActiveSection(activeSection === section ? null : section);
  };

  return (
    <VStack
      w="294px"
      bg="#F6F6F6"
      color="black"
      h="100vh"
      //   overflowY="scroll"
      p={4}
      position="fixed"
    >
      <Image src={logo} height="20px" width="auto" mb={8} />
      <VStack justifyContent="flex-start" align="stretch" spacing={4}>
        {sidebarItems.map((item) => (
          <Box key={item.value}>
            <Link
              as={RouterLink}
              to={item.route}
              color={activeSection === item.value ? "#FFFFFF" : "#000000"}
            >
              <Flex
                boxShadow=" 0px 4px 20px 0px #00000014"
                align="center"
                justify="space-between"
                p={3}
                bg={activeSection === item.value ? "#02A0A0" : "transparent"}
                borderRadius="md"
                cursor="pointer"
                onClick={() => toggleSection(item.value)}
                w="254px"
              >
                <Flex
                  justifyContent="space-between"
                  width="100%"
                  align="center"
                  gap={3}
                >
                  {/* <MdDashboard
                    color={activeSection === item.value ? "#FFFFFF" : "#000000"}
                    size="20px"
                  /> */}

                  {item.icon}
                  <Text width="100%" fontSize="sm" fontWeight="medium">
                    {item.title}
                  </Text>
                </Flex>
                {item.links && (
                  <Box ml="auto">
                    {activeSection === item.value ? (
                      <FaChevronUp color="#FFFFFF" />
                    ) : (
                      <FaChevronDown color="#000000" />
                    )}
                  </Box>
                )}
              </Flex>
            </Link>
            {/* Sub-links */}
            {item.links && activeSection === item.value && (
              <VStack align="start" pl={8} spacing={2} mt={2}>
                {item.links.map((link) => (
                  <Link
                    as={RouterLink}
                    to={link.path}
                    key={link.path}
                    color="gray.600"
                    _hover={{ color: "black" }}
                  >
                    {link.label}
                  </Link>
                ))}
              </VStack>
            )}
          </Box>
        ))}
      </VStack>
    </VStack>
  );
};

const sidebarItems = [
  {
    value: "dashboard",
    title: "Dashboard",
    route: "/",
    icon: <MdDashboard />,
  },
  {
    value: "manageuser",
    title: "Manage User",
    links: [
      { label: "Register Users", path: "/manage-users/register-users" },
      { label: "Deactivated Accounts", path: "/manage-users/deactivated-accs" },
    ],
    icon: <IoDocumentTextOutline />,
  },
  {
    value: "managePost",
    title: "Manage Post",
    icon: <FiEdit />,
  },
  {
    value: "manageSubAdmin",
    title: "Manage Sub-Admin",
    icon: <FaRegUser />,
  },
  {
    value: "manageJobs",
    title: "Manage Jobs",
    icon: <IoBag />,
  },
  {
    value: "manageGroups",
    title: "Manage Groups",
    icon: <MdGroups color="gray" />,
  },
  {
    value: "manageContactUs",
    title: "Manage Contact Us",
    icon: <BiSupport />,
  },
  {
    value: "manageCms",
    title: "Manage CMS",
    links: [
      { label: "Profile", path: "/settings/profile" },
      { label: "Preferences", path: "/settings/preferences" },
    ],
    icon: <IoDocumentTextOutline />,
  },
  {
    value: "myprofle",
    title: "My Profile",
    links: [
      { label: "Settings", path: "/master/settings" },
      { label: "Modules", path: "/master/modules" },
    ],
    icon: <FaRegUser />,
  },
  {
    value: "masterModule",
    title: "Master Module",
    links: [
      { label: "Settings", path: "/master/settings" },
      { label: "Modules", path: "/master/modules" },
    ],
    icon: <GiDatabase />,
  },
];

export default Sidebar;