import { useSlotRecipe, Box, Button, IconButton } from "@chakra-ui/react";
import { ColorModeButton, useColorMode } from "@/components/ui/color-mode";
import { useState } from "react";
import { NavLink } from "react-router-dom";
import Tooltip from "../Canvas/CanvasComponents/Tooltip.jsx";
import { Mountain, House, Earth, MapPin, ShieldUser, Menu, CircleUserRound, KeyRound } from 'lucide-react';

export default function Sidebar() {
  const { toggleColorMode } = useColorMode();
  const [isOpen, setIsOpen] = useState(true);
  const recipe = useSlotRecipe({ key: "sidebar" });
  const styles = recipe();

  // const buttons = useMemo(() => {
  //   if (["settings", "personal", "security"].includes(view)) {
  //     return [
  //       {icon: CircleUserRound, name: "Personal Info", url: "/personal"},
  //       {icon: KeyRound, name: "Security", url: "/security"},
  //     ];
  //   }
  //   return [
  //     {icon: House, name: "Home", url: "/mydashboard"},
  //     {icon: Earth, name: "Global Map", url: "/global"},
  //     {icon: MapPin, name: "Regional Map", url: "/regional"},
  //     {icon: Mountain, name: "Volcano", url: "/volcanohome"},
  //     {icon: ShieldUser, name: "Admin", url: "/medataentry"}
  //   ];
  // }, [view]);

  const buttons = [
    {icon: House, name: "Home", url: "/home"},
    {icon: Earth, name: "Global Map", url: "/global-map"},
    {icon: MapPin, name: "Regional Map", url: "/regional-map"},
    {icon: Mountain, name: "Volcano", url: "/volcano"},
    {icon: ShieldUser, name: "Admin", url: "/admin"}
  ];

  const toggleSidebar = () => {
    setIsOpen((prev) => !prev);
  };

  return (
    <Box css={styles.root} width={isOpen ? "210px" : "71px"} transition="width 0.4s ease" position="relative">
      <IconButton aria-label="Toggle Sidebar" variant="plain" size="md" onClick={toggleSidebar} width="54px">
        <Menu />
      </IconButton>

      {buttons.map((button, idx) => {
        const Icon = button.icon;
        return ( // TODO: don't use idx as a key
          <Tooltip key={button.name} tooltipkey={idx} content={button.name} sidebarIsOpen={isOpen}>
            <Button
              as={NavLink}
              to={button.url}
              key={button.name} 
              css={styles.buttons}
              justifyContent="flex-start"
            >           
              <Icon />
              <span
                style={{
                  opacity: isOpen ? 1 : 0,
                  transition: "opacity 0.4s ease",
                  overflow: "hidden",
                  whiteSpace: "nowrap",
                  display: "inline-block",
                  lineHeight: 1.2            
                }}
              >
                {button.name}
              </span>
            </Button>
          </Tooltip>
        )
      })}
      <ColorModeButton 
        onClick={() => toggleColorMode()}
        position="absolute" 
        bottom="2"
      />
    </Box>
  );
}