import {
  Box,
  Container,
  Image,
  useColorMode,
} from "@chakra-ui/react";
import { Link, NavLink } from "react-router-dom";
import logo from "../../assets/images/rubix.png";
import logoLight from "../../assets/images/rubixlogo.svg";
import { useEffect, useState } from "react";
import SwitchBtn from "../SwitchBtn/SwitchBtn";

const NavBar = () => {
  const [windowWidth, setWindowWidth] = useState(window.innerWidth);
  const [isScrolled, setIsScrolled] = useState(false); // Declare isScrolled state
  const { colorMode } = useColorMode();
  const [isSwitchOn, setIsSwitchOn] = useState(true);

  useEffect(() => {
    const handleScroll = () => {
      const scrollPosition = window.scrollY;
      setIsScrolled(scrollPosition > 0); // Update isScrolled based on scroll position
    };
    
    const handleResize = () => {
      setWindowWidth(window.innerWidth);
    };

    window.addEventListener("scroll", handleScroll);
    window.addEventListener("resize", handleResize);

    return () => {
      window.removeEventListener("scroll", handleScroll);
      window.removeEventListener("resize", handleResize);
    };
  }, []);

  return (
    <>
      <Box
        position={"absolute"}
        zIndex={"999"}
        width={"100%"}
        top={0}
        left={0}
        id="navbar"
        color={colorMode === "light" ? "light" : "black.900"}
        padding={"16px 0px"}
        borderBottom={colorMode === "light" ? "1px solid #ccc" : "none"}
      >
        <Container maxW="6xl">
          <Box
            display={"flex"}
            alignItems={"center"}
            justifyContent={"space-between"}
            w={"100%"}
          >
            <Link to="/">
              <Image
                src={colorMode === "light" ? logoLight : logo}
                width={"120px"}
              />
            </Link>

            <Box display={"flex"} alignItems={"center"} gap={7}>
              <NavLink
                to="/main-net"
                style={({ isActive }) => ({
                  fontSize: "14px",
                  fontWeight: "400",
                  borderBottom: isActive
                    ? "1px solid #DE858E"
                    : "0px solid #fff", // Active style for MAIN NET
                })}
              >
                MAIN NET
              </NavLink>
              <NavLink
                to="/subnet"
                style={({ isActive }) => ({
                  fontSize: "14px",
                  fontWeight: "400",
                  borderBottom: isActive
                    ? "1px solid #DE858E"
                    : "0px solid #fff", // Active style for SUBNETS
                })}
              >
                SUBNETS
              </NavLink>
              <SwitchBtn
                isSwitchOn={isSwitchOn}
                setIsSwitchOn={setIsSwitchOn}
              />
            </Box>
          </Box>
        </Container>
      </Box>
    </>
  );
};

export default NavBar;
