import { useSlotRecipe, Box, Button, IconButton } from "@chakra-ui/react";
import { ColorModeButton, useColorMode } from "@/components/ui/color-mode";
// import { Tooltip } from "@/components/ui/tooltip";
import Tooltip from "../Canvas/components/Tooltip.jsx";
import { FaVolcano } from "react-icons/fa6";
import { FaHome } from "react-icons/fa";
import { FaGlobeAmericas } from "react-icons/fa";
import { FaMapMarkerAlt } from "react-icons/fa";
import { HiUsers } from "react-icons/hi2";
import { VscThreeBars } from "react-icons/vsc";
import { useState, useEffect } from "react";
import { Seismic } from "../Canvas/views/DashboardCanvasNav/Seismic";
import { DASHBOARD_VIEWS } from "@/constants/viewKeys";

export default function Sidebar({ view, onChangeView, darkMode, setDarkMode }) {
  const [isOpen, setIsOpen] = useState(true);
  const [activeButton, setActiveButton] = useState(0)
  const recipe = useSlotRecipe({ key: "sidebar" });
  const styles = recipe();
  const { toggleColorMode } = useColorMode();

    // this list of btns will come from the db (not every usr will have access to admin)
  const buttons = [
    {icon: FaHome, name: "Home", view: "widget"},
    {icon: FaGlobeAmericas, name: "Global Map", view: "global"},
    {icon: FaMapMarkerAlt, name: "Regional Map", view: "regional"},
    {icon: FaVolcano, name: "Volcano", view: "volcano"},
    {icon: HiUsers, name: "Admin", view: "admin"}
  ];

  const toggleSidebar = () => {
    if (isOpen) setIsOpen(false);
    else setIsOpen(true);
  };

  // Track currrent view from both Sidebar and Canvas when 'view' changes
  useEffect(() => {
    // console.log("typeof view =", typeof view);
    console.log("Current view = ", view);

    const newIndex = buttons.findIndex((btn) => {
      if (btn.view === "widget") {
        return DASHBOARD_VIEWS.includes(view); // Group match
      }
      return btn.view === view; // Exact match
    });

    if (newIndex !== -1 ) {
      setActiveButton(newIndex);
    }
  }, [view]);

  return (
    <Box
      // key={button.name}
      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"
      >
        <VscThreeBars />
      </IconButton>

      {buttons.map((button, idx) => {
        const Icon = button.icon;
        return (
          <Tooltip key={button.name} tooltipkeykey={idx} content={button.name} sidebarIsOpen={isOpen}>
            <Button 
              key={button.name} 
              css={styles.buttons} 
              onClick={() => {
                // setActiveButton(idx);
                onChangeView(button.view); // Trigger state change in Dashboard
              }} 
              bg={activeButton === idx ? "primary":undefined} 
              color={activeButton === idx ? "#FFFFFF":undefined} 
              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={
        () => {
          setDarkMode(!darkMode);
          toggleColorMode();
        }}
      position="absolute" 
      bottom="2"/>
    </Box>
  );
}