import { chakra, useRecipe, useSlotRecipe, Box, Button, createIcon, CloseButton, IconButton, Stack, useDisclosure, Tooltip } from "@chakra-ui/react";
import { ColorModeButton } from "@/components/ui/color-mode";
import { FaVolcano } from "react-icons/fa6";
import { RxHamburgerMenu } from "react-icons/rx";
import { useState } from "react";

// ICONS
export const PushPin = createIcon({
  displayName: "PushPin",
  viewBox: "0 0 24 24",
  fill: "none",
  path: (
    <>
      <path xmlns="http://www.w3.org/2000/svg" d="M6.21967 0.21967C6.36032 0.0790176 6.55109 0 6.75 0H17.25C17.6642 0 18 0.335786 18 0.75C18 1.76907 17.4871 2.51108 17.0303 2.96783C16.8422 3.15598 16.6554 3.30457 16.5 3.41487V10.0621C16.5369 10.0844 16.5757 10.1082 16.6162 10.1335C16.9211 10.3241 17.3307 10.6053 17.7439 10.9668C18.5387 11.6623 19.5 12.7902 19.5 14.25C19.5 14.6642 19.1642 15 18.75 15H12.75V21.75C12.75 22.1642 12.4142 24 12 24C11.5858 24 11.25 22.1642 11.25 21.75V15H5.25C4.83579 15 4.5 14.6642 4.5 14.25C4.5 12.7902 5.46131 11.6623 6.25612 10.9668C6.66928 10.6053 7.07891 10.3241 7.38375 10.1335C7.42429 10.1082 7.46311 10.0844 7.5 10.0621V3.41487C7.34463 3.30457 7.15782 3.15598 6.96967 2.96783C6.51292 2.51108 6 1.76907 6 0.75C6 0.551088 6.07902 0.360322 6.21967 0.21967Z" stroke="#19332D" strokeWidth="1.5"/>
    </>
  ),
});

export const Globe = createIcon({
  displayName: "Globe",
  viewBox: "0 0 24 24",
  fill: "none",
  path: (
    <>
      <circle cx="12" cy="12" r="10" stroke="#19332D" strokeWidth="1.5"/>
      <path opacity="0.5" d="M6 4.71053C6.78024 5.42105 8.38755 7.36316 8.57481 9.44737C8.74984 11.3955 10.0357 12.9786 12 13C12.7549 13.0082 13.5183 12.4629 13.5164 11.708C13.5158 11.4745 13.4773 11.2358 13.417 11.0163C13.3331 10.7108 13.3257 10.3595 13.5 10C14.1099 8.74254 15.3094 8.40477 16.2599 7.72186C16.6814 7.41898 17.0659 7.09947 17.2355 6.84211C17.7037 6.13158 18.1718 4.71053 17.9377 4" stroke="#19332D" strokeWidth="1.5"/>
      <path opacity="0.5" d="M22 13C21.6706 13.931 21.4375 16.375 17.7182 16.4138C17.7182 16.4138 14.4246 16.4138 13.4365 18.2759C12.646 19.7655 13.1071 21.3793 13.4365 22" stroke="#19332D" strokeWidth="1.5"/>
    </>
  ),
});

export const MapMarker = createIcon({
  displayName: "MapMarker",
  viewBox: "0 0 24 24",
  fill: "none",
  path: (
    <>
      <path d="M21.2188 9.80011C21.2188 16.8001 12.2188 22.8001 12.2188 22.8001C12.2188 22.8001 3.21875 16.8001 3.21875 9.80011C3.21875 7.41316 4.16696 5.12398 5.85479 3.43615C7.54262 1.74832 9.8318 0.80011 12.2188 0.80011C14.6057 0.80011 16.8949 1.74832 18.5827 3.43615C20.2705 5.12398 21.2187 7.41316 21.2188 9.80011Z" stroke="#19332D" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
      <path d="M12.2188 12.8001C13.8756 12.8001 15.2188 11.457 15.2188 9.80011C15.2188 8.14326 13.8756 6.80011 12.2188 6.80011C10.5619 6.80011 9.21875 8.14326 9.21875 9.80011C9.21875 11.457 10.5619 12.8001 12.2188 12.8001Z" stroke="#19332D" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
    </>
  ),
});

export const Users = createIcon({
  displayName: "Users",
  viewBox: "0 0 24 24",
  fill: "none",
  path: (
    <>
      <path d="M17.888 10.8967C19.283 10.7007 20.357 9.50466 20.36 8.05566C20.36 6.62767 19.319 5.44367 17.954 5.21967" stroke="#19332D" strokeWidth="1.375" strokeLinecap="round" strokeLinejoin="round"/>
      <path d="M19.7278 14.2502C21.0788 14.4522 22.0218 14.9252 22.0218 15.9002C22.0218 16.5712 21.5778 17.0072 20.8598 17.2812" stroke="#19332D" strokeWidth="1.375" strokeLinecap="round" strokeLinejoin="round"/>
      <path fillRule="evenodd" clipRule="evenodd" d="M11.886 14.6638C8.67203 14.6638 5.92702 15.1508 5.92702 17.0958C5.92702 19.0398 8.65503 19.5408 11.886 19.5408C15.1 19.5408 17.844 19.0588 17.844 17.1128C17.844 15.1668 15.117 14.6638 11.886 14.6638Z" stroke="#19332D" strokeWidth="1.375" strokeLinecap="round" strokeLinejoin="round"/>
      <path fillRule="evenodd" clipRule="evenodd" d="M11.8867 11.8878C13.9957 11.8878 15.7057 10.1788 15.7057 8.06882C15.7057 5.95982 13.9957 4.24982 11.8867 4.24982C9.77768 4.24982 8.06768 5.95982 8.06768 8.06882C8.05968 10.1708 9.75668 11.8808 11.8587 11.8878H11.8867Z" stroke="#19332D" strokeWidth="1.375" strokeLinecap="round" strokeLinejoin="round"/>
      <path d="M5.8834 10.8967C4.4874 10.7007 3.4144 9.50466 3.4114 8.05566C3.4114 6.62767 4.4524 5.44367 5.8174 5.21967" stroke="#19332D" strokeWidth="1.375" strokeLinecap="round" strokeLinejoin="round"/>
      <path d="M4.04329 14.2502C2.69229 14.4522 1.74929 14.9252 1.74929 15.9002C1.74929 16.5712 2.19329 17.0072 2.91129 17.2812" stroke="#19332D" strokeWidth="1.375" strokeLinecap="round" strokeLinejoin="round"/>
    </>
  ),
});

export default function Sidebar() {
  const [isOpen, setIsOpen] = useState(true);
  const [hasFinishedClosing, setHasFinishedClosing] = useState(true);
  
  const [activeButton, setActiveButton] = useState(0)
  const recipe = useSlotRecipe({ key: "sidebar" });
  const styles = recipe();

  const toggleSidebar = () => {
    if (isOpen) {
      setHasFinishedClosing(false);
      setTimeout(() => setIsOpen(false), 10); // Kick off transition
      setTimeout(() => setHasFinishedClosing(true), 400); // Match sidebar transition duration
    } else {
      setIsOpen(true);
      setHasFinishedClosing(true);
    }
  };

  return (
    <Box
      css={styles.root}
      w={isOpen ? "220px" : "86px"}
      transition="width 0.4s ease"
    >
      <IconButton
        aria-label="Toggle Sidebar"
        variant="ghost"
        size="md"
        onClick={toggleSidebar}
      >
        <RxHamburgerMenu />
      </IconButton>
      
      {/* Dashboard */}
      <Button css={styles.buttons} onClick={() => setActiveButton(0)} bg={activeButton === 0 ? "primary":undefined}>
        {isOpen ? (
          <>
            <PushPin fill="white" />

            {/* Make text appear gradually instead of popping in */}
            <span
              style={{
                marginLeft: "8px",
                opacity: isOpen ? 1 : 0,
                maxWidth: isOpen ? "250px" : "0px", // prevent layout from expanding before fade-in
                overflow: "hidden",
                whiteSpace: "nowrap",
                display: "inline-block",
                transitionProperty: "opacity, max-width",
                transitionDuration: "0.3s",
                transitionTimingFunction: "ease",
                transitionDelay: isOpen ? "0.1s" : "0s",
                visibility: isOpen || !hasFinishedClosing ? "visible" : "hidden",
              }}
            >
              Dashboard
            </span>
          </>
        ) : (
          <PushPin fill="white" />
        )}
      </Button>

      {/* Global Map */}
      <Button css={styles.buttons} onClick={() => setActiveButton(1)} bg={activeButton === 1 ? "primary":undefined}>
        {isOpen ? (
          <>            
            <Globe fill="white" stroke="black" />
            
            {/* Make text appear gradually instead of popping in */}
            <span
              style={{
                marginLeft: "8px",
                opacity: isOpen ? 1 : 0,
                maxWidth: isOpen ? "250px" : "0px", // prevent layout from expanding before fade-in
                overflow: "hidden",
                whiteSpace: "nowrap",
                display: "inline-block",
                transitionProperty: "opacity, max-width",
                transitionDuration: "0.3s",
                transitionTimingFunction: "ease",
                transitionDelay: isOpen ? "0.1s" : "0s",
                visibility: isOpen || !hasFinishedClosing ? "visible" : "hidden",
              }}
            >
              Global Map
            </span>
          </>
        ) : (
          <Globe fill="white" stroke="black" />
        )}
      </Button>

      {/* Regional Map */}
      <Button css={styles.buttons} onClick={() => setActiveButton(2)} bg={activeButton === 2 ? "primary":undefined}>
        {isOpen ? (
          <>
            <MapMarker fill="white" stroke="black"/>
            {/* Make text appear gradually instead of popping in */}
            <span
              style={{
                marginLeft: "8px",
                opacity: isOpen ? 1 : 0,
                maxWidth: isOpen ? "250px" : "0px", // prevent layout from expanding before fade-in
                overflow: "hidden",
                whiteSpace: "nowrap",
                display: "inline-block",
                transitionProperty: "opacity, max-width",
                transitionDuration: "0.3s",
                transitionTimingFunction: "ease",
                transitionDelay: isOpen ? "0.1s" : "0s",
                visibility: isOpen || !hasFinishedClosing ? "visible" : "hidden",
              }}
            >
              Regional Map
            </span>
          </>
        ) : (
          <MapMarker fill="white" stroke="black" />
        )}
      </Button>

      {/* Volcano */}
      <Button css={styles.buttons} onClick={() => setActiveButton(3)} bg={activeButton === 3 ? "primary":undefined}>
        {isOpen ? (
          <>
            {/* <FaVolcano size={20} style={{ marginRight: "1px" }} /> */}
            <FaVolcano />
            {/* Make text appear gradually instead of popping in */}
            <span
              style={{
                marginLeft: "8px",
                opacity: isOpen ? 1 : 0,
                maxWidth: isOpen ? "250px" : "0px", // prevent layout from expanding before fade-in
                overflow: "hidden",
                whiteSpace: "nowrap",
                display: "inline-block",
                transitionProperty: "opacity, max-width",
                transitionDuration: "0.3s",
                transitionTimingFunction: "ease",
                transitionDelay: isOpen ? "0.1s" : "0s",
                visibility: isOpen || !hasFinishedClosing ? "visible" : "hidden",
              }}
            >
              Volcano
            </span>
          </>
        ) : (
          <FaVolcano />
        )}
      </Button>

      {/* Admin */}
      <Button css={styles.buttons} onClick={() => setActiveButton(4)} bg={activeButton === 4 ? "primary":undefined}>
        {isOpen ? (
          <>
            {/* <Users boxSize={5} style={{ marginRight: "8px" }} /> */}
            <Users fill="white" stroke="black" />

            {/* Make text appear gradually instead of popping in */}
            <span
              style={{
                marginLeft: "8px",
                opacity: isOpen ? 1 : 0,
                maxWidth: isOpen ? "200px" : "0px", // prevent layout from expanding before fade-in
                overflow: "hidden",
                whiteSpace: "nowrap",
                display: "inline-block",
                transitionProperty: "opacity, max-width",
                transitionDuration: "0.3s",
                transitionTimingFunction: "ease",
                transitionDelay: isOpen ? "0.1s" : "0s",
                visibility: isOpen || !hasFinishedClosing ? "visible" : "hidden",
              }}
            >
              Admin
            </span>
          </>
        ) : (
          <Users fill="white" stroke="black" />
        )}
      </Button>
      <ColorModeButton position="absolute" bottom="2"/>
    </Box>
  );
}

// THIS CODE WORKS, SAVE IN CASE OF EMERGENCY
// Needed to refactor in order allow transitions to work properly

// export default function Sidebar () {
//   const [isOpen, setIsOpen] = useState(true);
//   const [activeButton, setActiveButton] = useState("Dashboard")

//   return (
//     <>
//       {isOpen && (
//         <Box  w="100%" h="100%" 
//             borderRight="1px" 
//             borderColor="black" 
//             borderStyle="solid" 
//             display="flex" 
//             flexDirection="column" 
//             justifyContent="start" 
//             alignItems="start" 
//             gap={4} paddingTop={4}
//             paddingLeft={14} paddingRight={3}
//         >
//           {/* <CloseButton color="secondary"  _hover={{bg: "#EDF1F1"}} size="sm" variant="ghost" left="-10" onClick={() => setIsOpen(!isOpen)}></CloseButton> */}
//           {/* <RxHamburgerMenu color="secondary"  _hover={{bg: "#EDF1F1"}} size="sm" variant="ghost" left="-10" onClick={() => setIsOpen(!isOpen)}></RxHamburgerMenu> */}
//           <Button 
//             aria-lable="Toggle Sidebar"
//             color="secondary"  
//             _hover={{bg: "#EDF1F1"}} 
//             size="md" variant="ghost" 
//             left="-10"
//             // ml="auto" // Margin-left: auto, pushes hamburger menu to right side 
//             onClick={() => setIsOpen(!isOpen)}
//           >
//             <RxHamburgerMenu />
//           </Button>
//           <Button color="#19332D" _hover={activeButton === "Dashboard" ? {bg: "#A4B6B6"}:{bg:"#EDF1F1"}} fontSize="xl" variant="ghost" onClick={() => setActiveButton("Dashboard")} bg={activeButton === "Dashboard" ? "#A4B6B6" : "transparent"}>
//             <PushPin fill="white" /> Dashboard
//           </Button>
//           <Button color="#19332D" _hover={activeButton === "Global" ? {bg: "#A4B6B6"}:{bg:"#EDF1F1"}} fontSize="xl" variant="ghost" onClick={() => setActiveButton("Global")} bg={activeButton === "Global" ? "#A4B6B6" : "transparent"}>
//             <Globe fill="white" stroke="black" /> Global Map
//           </Button>
//           <Button color="#19332D" _hover={activeButton === "Regional" ? {bg: "#A4B6B6"}:{bg:"#EDF1F1"}} fontSize="xl" variant="ghost" onClick={() => setActiveButton("Regional")} bg={activeButton === "Regional" ? "#A4B6B6" : "transparent"}>
//             <MapMarker fill="white" stroke="black"/> Regional Map
//           </Button>
//           <Button color="#19332D" _hover={activeButton === "Volcano" ? {bg: "#A4B6B6"}:{bg:"#EDF1F1"}} fontSize="xl" variant="ghost" onClick={() => setActiveButton("Volcano")} bg={activeButton === "Volcano" ? "#A4B6B6" : "transparent"}>
//             <FaVolcano /> Volcano
//           </Button>
//           <Button color="#19332D" _hover={activeButton === "Admin" ? {bg: "#A4B6B6"}:{bg:"#EDF1F1"}} fontSize="xl" variant="ghost" onClick={() => setActiveButton("Admin")} bg={activeButton === "Admin" ? "#A4B6B6" : "transparent"}>
//             <Users fill="white" stroke="black" /> Admin
//           </Button>
//         </Box>
//       )}

//       {!isOpen && (
//         <Box  w="100%" h="100%" 
//               borderRight="1px" 
//               borderColor="black" 
//               borderStyle="solid" 
//               display="flex" 
//               flexDirection="column" 
//               justifyContent="start" 
//               alignItems="start" 
//               gap={4} padding={4}
//         >
//           <IconButton color="#19332D" _hover={{bg: "#EDF1F1"}} size="md" variant="ghost" onClick={() => setIsOpen(!isOpen)}>
//             <RxHamburgerMenu />
//           </IconButton>
//           <IconButton color="#19332D" _hover={activeButton === "Dashboard" ? {bg: "#A4B6B6"}:{bg:"#EDF1F1"}} variant="ghost" onClick={() => setActiveButton("Dashboard")} bg={activeButton === "Dashboard" ? "#A4B6B6" : "transparent"}>
//             <PushPin fill="white"/>
//           </IconButton>
//           <IconButton color="#19332D" _hover={activeButton === "Global" ? {bg: "#A4B6B6"}:{bg:"#EDF1F1"}} variant="ghost" onClick={() => setActiveButton("Global")} bg={activeButton === "Global" ? "#A4B6B6" : "transparent"}>
//             <Globe fill="white" stroke="black" />
//           </IconButton>
//           <IconButton color="#19332D" _hover={activeButton === "Regional" ? {bg: "#A4B6B6"}:{bg:"#EDF1F1"}} variant="ghost" onClick={() => setActiveButton("Regional")} bg={activeButton === "Regional" ? "#A4B6B6" : "transparent"}>
//             <MapMarker fill="white" stroke="black" />
//           </IconButton>
//           <IconButton color="#19332D" _hover={activeButton === "Volcano" ? {bg: "#A4B6B6"}:{bg:"#EDF1F1"}} variant="ghost" onClick={() => setActiveButton("Volcano")} bg={activeButton === "Volcano" ? "#A4B6B6" : "transparent"}>
//             <FaVolcano />
//           </IconButton>
//           <IconButton color="#19332D" _hover={activeButton === "Admin" ? {bg: "#A4B6B6"}:{bg:"#EDF1F1"}} variant="ghost" onClick={() => setActiveButton("Admin")} bg={activeButton === "Admin" ? "#A4B6B6" : "transparent"}>
//             <Users fill="white" stroke="black" />
//           </IconButton>
//         </Box>
//       )}
      
//     </>
//   );
// }