/* eslint-disable no-unused-vars */
import {
  Box,
  Image,
  Popover,
  PopoverTrigger,
  PopoverContent,
  PopoverHeader,
  PopoverBody,
  PopoverFooter,
  PopoverArrow,
  PopoverCloseButton,
  PopoverAnchor,
  Button,
} from "@chakra-ui/react";
import { Outlet, Link, useLocation } from "react-router-dom";
import { useEffect, useState } from "react";
import logo from "../../assets/images/rubix.png";
import { MobileMenu } from "../MobileMenu/MobileMenu";
import arrow from "../../assets/images/arrow.png";
import learnIcon from "../../assets/images/Navicons/learnNav.png";
import pledgeIcon from "../../assets/images/Navicons/pledgeIcon.png";
import contractIcon from "../../assets/images/Navicons/contractIcon.png";
import tokenIcon from "../../assets/images/Navicons/contractIcon.png";
import buildIcon from "../../assets/images/Navicons/buildIcon.png";
import nodeIcon from "../../assets/images/Navicons/nodeIcon.png";
import quorumIcon from "../../assets/images/Navicons/quorumIcon.png";
import subnetsIcon from "../../assets/images/Navicons/subnetsIcon.png";
import fintechIcon from "../../assets/images/Navicons/fintechIcon.png";
import adTech from "../../assets/images/Navicons/adTech.png";
import marTech from "../../assets/images/Navicons/marTech.png";
import healthTech from "../../assets/images/Navicons/healthTech.png";

const NavBar = () => {
  const [isScrolled, setIsScrolled] = useState(false);
  const [isHoveredLearn, setIsHoveredLearn] = useState(false);
  const [isHoveredBuild, setIsHoveredBuild] = useState(false);
  const [isHoveredCases, setIsHoveredCases] = useState(false);
  // const [isHoveredCommunity, setIsHoveredCommunity] = useState(false);
  const [windowWidth, setWindowWidth] = useState(window.innerWidth);
  const location = useLocation();

  const linkStyle = {
    width: "0",
  };

  const active = {
    content: "''",
    position: "absolute",
    bottom: "0px",
    left: "50%",
    width: "100%",
    height: "3px",
    backgroundColor: "#DE858E",
    borderRadius: "10px",
    transform: "translateX(-50%)",
    transition: "all .3s",
  };

  const highlight = {
    color: "rgb(222, 133, 142)",
  };

  const normal = {
    color: "#fff",
  };

  const iconwidth = "50px";

  useEffect(() => {
    const handleScroll = () => {
      const scrollPosition = window.scrollY;
      setIsScrolled(scrollPosition > 0);
    };
    const handleResize = () => {
      setWindowWidth(window.innerWidth);
    };

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

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

  const isMobile = windowWidth <= 996;

  return (
    <>
      {!isMobile ? (
        <>
          <Box position={"fixed"} zIndex={"999"} width={"100%"}>
            <Box
              backgroundColor={"#141315"}
              // position={"fixed"}
              zIndex={"9999"}
              width={"100%"}
              textAlign={"right"}
              padding={"4px 0px"}
            >
              <Box marginRight={"6%"}>
                <Link
                  to="https://getfexr.com/"
                  target="_blank"
                  rel="noopener noreferrer"
                  style={{
                    color: "#fff",
                    marginRight: "2.5rem",
                    fontSize: "14px",
                  }}
                >
                  WALLET
                </Link>
                <Link
                  to="https://rubixexplorer.com/"
                  target="_blank"
                  rel="noopener noreferrer"
                  style={{
                    color: "#fff",
                    marginRight: "2.5rem",
                    fontSize: "14px",
                  }}
                >
                  EXPLORER
                </Link>
              </Box>
            </Box>

            <Box
              display="flex"
              color={"#fff"}
              justifyContent={"space-around"}
              alignItems={"center"}
              background={
                isScrolled ? "#0B0B27" : "transparent"
                // "linear-gradient(to right, #9c5d67, #86455f, #6b3059, #4c1f54, #23144e)"
              }
              // boxShadow={"0px 0px 4px 0px rgba(0, 0, 0, 0.25)"}
              // position={"fixed"}
              zIndex={"999"}
              width={"100%"}
              top={"0px"}
              padding={"28px 0"}
              sx={{
                "@media (max-width: 996px)": {
                  justifyContent: "space-between",
                },
                "@media (max-width: 375px)": {
                  padding: "1rem",
                },
              }}
            >
              <Link to="/">
                <Box
                  display={"flex"}
                  alignItems={"baseline"}
                  justifyContent={"center"}
                >
                  <Image
                    src={logo}
                    width={"160px"}
                    sx={{
                      "@media (max-width: 1024px)": {
                        width: "100px",
                      },
                      "@media (max-width: 375px)": {
                        width: "100px",
                      },
                    }}
                  />
                </Box>
              </Link>

              <Box
                display={"flex"}
                gap={"25px"}
                alignItems={"center"}
                sx={{
                  "@media (max-width: 1024px)": {
                    gap: "22px",
                  },
                }}
              >
                <Popover
                  isOpen={isHoveredLearn}
                  onClose={() => setIsHoveredLearn(false)}
                >
                  <PopoverTrigger>
                    <Button
                      backgroundColor={"transparent"}
                      color={"#fff"}
                      fontWeight={"400"}
                      _hover={{
                        backgroundColor: "transparent",
                      }}
                      _focus={{
                        boxShadow: "none",
                      }}
                      onMouseEnter={() => setIsHoveredLearn(true)}
                      onMouseLeave={() => setIsHoveredLearn(false)}
                    >
                      LEARN
                      <span
                        style={
                          location.pathname === "/LearnPage"
                            ? active
                            : linkStyle
                        }
                      />
                    </Button>
                  </PopoverTrigger>
                  <PopoverContent
                    backgroundColor={"#0D0B20"}
                    borderRadius={"10px"}
                    border={"none"}
                    padding={"1rem"}
                    onMouseEnter={() => setIsHoveredLearn(true)}
                    onMouseLeave={() => setIsHoveredLearn(false)}
                    _focus={{
                      boxShadow: "none",
                    }}
                  >
                    <PopoverArrow backgroundColor={"#0D0B20"} shadow={"none"} />
                    <PopoverBody>
                      <Link
                        to="/LearnPage"
                        className="link"
                        style={
                          location.pathname === "/LearnPage"
                            ? highlight
                            : normal
                        }
                      >
                        <Box
                          display={"flex"}
                          alignItems={"center"}
                          gap={"1rem"}
                          marginBottom={"1rem"}
                        >
                          <Image src={learnIcon} width={`${iconwidth}`} />
                          Learn
                        </Box>
                      </Link>
                    </PopoverBody>

                    <PopoverBody>
                      <Link
                        to="https://learn.rubix.net/pop/"
                        target="_blank"
                        className="link"
                        style={
                          location.pathname === "/LearnPage"
                            ? highlight
                            : normal
                        }
                      >
                        <Box
                          display={"flex"}
                          alignItems={"center"}
                          gap={"1rem"}
                          marginBottom={"1rem"}
                        >
                          <Image src={pledgeIcon} width={`${iconwidth}`} />
                          Proof-of-pledge Protocol
                        </Box>
                      </Link>
                    </PopoverBody>

                    <PopoverBody>
                      <Link
                        to="https://learn.rubix.net/smartcontract/"
                        target="_blank"
                        className="link"
                        style={
                          location.pathname === "/LearnPage"
                            ? highlight
                            : normal
                        }
                      >
                        <Box
                          display={"flex"}
                          alignItems={"center"}
                          gap={"1rem"}
                          marginBottom={"1rem"}
                        >
                          <Image src={contractIcon} width={`${iconwidth}`} />
                          Smart contracts
                        </Box>
                      </Link>
                    </PopoverBody>

                    <PopoverBody>
                      <Link
                        to="https://learn.rubix.net/tokenomics/"
                        target="_blank"
                        className="link"
                        style={
                          location.pathname === "/LearnPage"
                            ? highlight
                            : normal
                        }
                      >
                        <Box
                          display={"flex"}
                          alignItems={"center"}
                          gap={"1rem"}
                          marginBottom={"1rem"}
                        >
                          <Image src={tokenIcon} width={`${iconwidth}`} />
                          Tokenomics in Rubix
                        </Box>
                      </Link>
                    </PopoverBody>
                  </PopoverContent>
                </Popover>

                <Popover
                  isOpen={isHoveredBuild}
                  onClose={() => setIsHoveredBuild(false)}
                >
                  <PopoverTrigger>
                    <Button
                      backgroundColor={"transparent"}
                      color={"#fff"}
                      fontWeight={"400"}
                      _hover={{
                        backgroundColor: "transparent",
                      }}
                      _focus={{
                        boxShadow: "none",
                      }}
                      onMouseEnter={() => setIsHoveredBuild(true)}
                      onMouseLeave={() => setIsHoveredBuild(false)}
                    >
                      BUILD
                      <span
                        style={
                          location.pathname === "/BuildPage"
                            ? active
                            : linkStyle
                        }
                      />
                    </Button>
                  </PopoverTrigger>
                  <PopoverContent
                    backgroundColor={"#0D0B20"}
                    borderRadius={"10px"}
                    border={"none"}
                    padding={"1rem"}
                    _focus={{
                      boxShadow: "none",
                    }}
                    onMouseEnter={() => setIsHoveredBuild(true)}
                    onMouseLeave={() => setIsHoveredBuild(false)}
                  >
                    <PopoverArrow backgroundColor={"#0D0B20"} shadow={"none"} />
                    <PopoverBody>
                      <Link
                        to="/BuildPage"
                        className="link"
                        style={
                          location.pathname === "/BuildPage"
                            ? highlight
                            : normal
                        }
                      >
                        <Box
                          display={"flex"}
                          alignItems={"center"}
                          gap={"1rem"}
                          marginBottom={"1rem"}
                        >
                          <Image src={buildIcon} width={`${iconwidth}`} />
                          Build
                        </Box>
                      </Link>
                    </PopoverBody>

                    <PopoverBody>
                      <Link
                        to="https://learn.rubix.net/node-setup/"
                        className="link"
                        // style={
                        //   location.pathname === "/BuildPage"
                        //     ? highlight
                        //     : normal
                        // }
                      >
                        <Box
                          display={"flex"}
                          alignItems={"center"}
                          gap={"1rem"}
                          marginBottom={"1rem"}
                        >
                          <Image src={nodeIcon} width={`${iconwidth}`} />
                          Set up Rubix Node
                        </Box>
                      </Link>
                    </PopoverBody>

                    <PopoverBody>
                      <Link
                        to="https://learn.rubix.net/quorum/"
                        className="link"
                        // style={
                        //   location.pathname === "/BuildPage"
                        //     ? highlight
                        //     : normal
                        // }
                      >
                        <Box
                          display={"flex"}
                          alignItems={"center"}
                          gap={"1rem"}
                          marginBottom={"1rem"}
                        >
                          <Image src={quorumIcon} width={`${iconwidth}`} />
                          Quorum
                        </Box>
                      </Link>
                    </PopoverBody>

                    <PopoverBody>
                      <Link
                        to="https://learn.rubix.net/subnets/"
                        className="link"
                        // style={
                        //   location.pathname === "/BuildPage"
                        //     ? highlight
                        //     : normal
                        // }
                      >
                        <Box
                          display={"flex"}
                          alignItems={"center"}
                          gap={"1rem"}
                          marginBottom={"1rem"}
                        >
                          <Image src={subnetsIcon} width={`${iconwidth}`} />
                          Subnets
                        </Box>
                      </Link>
                    </PopoverBody>
                  </PopoverContent>
                </Popover>

                <Popover
                  isOpen={isHoveredCases}
                  onClose={() => setIsHoveredCases(false)}
                >
                  <PopoverTrigger>
                    <Button
                      backgroundColor={"transparent"}
                      color={"#fff"}
                      fontWeight={"400"}
                      _hover={{
                        backgroundColor: "transparent",
                      }}
                      _focus={{
                        boxShadow: "none",
                      }}
                      onMouseEnter={() => setIsHoveredCases(true)}
                      onMouseLeave={() => setIsHoveredCases(false)}
                    >
                      USE CASES
                      <span
                        style={
                          location.pathname === "/fin-tech" ||
                          location.pathname === "/ad-tech" ||
                          location.pathname === "/mar-tech" ||
                          location.pathname === "/heath-tech"
                            ? active
                            : linkStyle
                        }
                      />
                    </Button>
                  </PopoverTrigger>
                  <PopoverContent
                    backgroundColor={"#0D0B20"}
                    borderRadius={"10px"}
                    border={"none"}
                    padding={"1rem"}
                    _focus={{
                      boxShadow: "none",
                    }}
                    onMouseEnter={() => setIsHoveredCases(true)}
                    onMouseLeave={() => setIsHoveredCases(false)}
                  >
                    <PopoverArrow backgroundColor={"#0D0B20"} shadow={"none"} />
                    <PopoverBody>
                      <Link
                        to="/fin-tech"
                        className="link"
                        style={
                          location.pathname === "/fin-tech" ? highlight : normal
                        }
                      >
                        <Box
                          display={"flex"}
                          alignItems={"center"}
                          gap={"1rem"}
                          marginBottom={"1rem"}
                        >
                          <Image src={fintechIcon} width={`${iconwidth}`} />
                          FinTech
                        </Box>
                      </Link>
                    </PopoverBody>

                    <PopoverBody>
                      <Link
                        to="/ad-tech"
                        className="link"
                        style={
                          location.pathname === "/ad-tech" ? highlight : normal
                        }
                      >
                        <Box
                          display={"flex"}
                          alignItems={"center"}
                          gap={"1rem"}
                          marginBottom={"1rem"}
                        >
                          <Image src={adTech} width={`${iconwidth}`} />
                          AdTech
                        </Box>
                      </Link>
                    </PopoverBody>

                    <PopoverBody>
                      <Link
                        to="/mar-tech"
                        className="link"
                        style={
                          location.pathname === "/mar-tech" ? highlight : normal
                        }
                      >
                        <Box
                          display={"flex"}
                          alignItems={"center"}
                          gap={"1rem"}
                          marginBottom={"1rem"}
                        >
                          <Image src={marTech} width={`${iconwidth}`} />
                          MarTech
                        </Box>
                      </Link>
                    </PopoverBody>

                    <PopoverBody>
                      <Link
                        to="/health-tech"
                        className="link"
                        style={
                          location.pathname === "/health-tech"
                            ? highlight
                            : normal
                        }
                      >
                        <Box
                          display={"flex"}
                          alignItems={"center"}
                          gap={"1rem"}
                          marginBottom={"1rem"}
                        >
                          <Image src={healthTech} width={`${iconwidth}`} />
                          HealthTech
                        </Box>
                      </Link>
                    </PopoverBody>
                  </PopoverContent>
                </Popover>

                <Link
                  to="/community"
                  className="link"
                  style={
                    location.pathname === "/community" ? highlight : normal
                  }
                >
                  <Button
                    backgroundColor={"transparent"}
                    color={"#fff"}
                    fontWeight={"400"}
                    _hover={{
                      backgroundColor: "transparent",
                    }}
                    _focus={{
                      boxShadow: "none",
                    }}
                  >
                    COMMUNITY
                    <span
                      style={
                        location.pathname === "/community" ||
                        location.pathname === "/Articles"
                          ? active
                          : linkStyle
                      }
                    />
                  </Button>
                </Link>
                {/* <Popover
                  isOpen={isHoveredCommunity}
                  onClose={() => setIsHoveredCommunity(false)}
                >
                  <PopoverTrigger>
                    <Button
                      backgroundColor={"transparent"}
                      color={"#fff"}
                      fontWeight={"400"}
                      _hover={{
                        backgroundColor: "transparent",
                      }}
                      _focus={{
                        boxShadow: "none",
                      }}
                      onMouseEnter={() => setIsHoveredCommunity(true)}
                      onMouseLeave={() => setIsHoveredCommunity(false)}
                    >
                      COMMUNITY
                      <span
                        style={
                          location.pathname === "/community" ||
                          location.pathname === "/Articles"
                            ? active
                            : linkStyle
                        }
                      />
                    </Button>
                  </PopoverTrigger>
                  <PopoverContent
                    backgroundColor={"#0D0B20"}
                    borderRadius={"10px"}
                    border={"none"}
                    padding={"1rem"}
                    _focus={{
                      boxShadow: "none",
                    }}
                    onMouseEnter={() => setIsHoveredCommunity(true)}
                    onMouseLeave={() => setIsHoveredCommunity(false)}
                  >
                    <PopoverArrow backgroundColor={"#0D0B20"} shadow={"none"} />
                    <PopoverBody>
                      <Link
                        to="/community"
                        className="link"
                        style={
                          location.pathname === "/community"
                            ? highlight
                            : normal
                        }
                      >
                        <Box
                          display={"flex"}
                          alignItems={"center"}
                          gap={"1rem"}
                          marginBottom={"1rem"}
                        >
                          <Image src={fintechIcon} width={`${iconwidth}`} />
                          Community
                        </Box>
                      </Link>
                    </PopoverBody>

                    <PopoverBody>
                      <Link
                        to="/Articles"
                        className="link"
                        style={
                          location.pathname === "/Articles" ? highlight : normal
                        }
                      >
                        <Box
                          display={"flex"}
                          alignItems={"center"}
                          gap={"1rem"}
                          marginBottom={"1rem"}
                        >
                          <Image src={nodeIcon} width={`${iconwidth}`} />
                          News & Articles
                        </Box>
                      </Link>
                    </PopoverBody>

                    <PopoverBody>
                      <Link
                        to="/"
                        className="link"
                        // style={
                        //   location.pathname === "/LearnPage"
                        //     ? highlight
                        //     : normal
                        // }
                      >
                        <Box
                          display={"flex"}
                          alignItems={"center"}
                          gap={"1rem"}
                          marginBottom={"1rem"}
                        >
                          <Image src={quorumIcon} width={`${iconwidth}`} />
                          MarTech
                        </Box>
                      </Link>
                    </PopoverBody>

                    <PopoverBody>
                      <Link
                        to="/"
                        className="link"
                        // style={
                        //   location.pathname === "/LearnPage"
                        //     ? highlight
                        //     : normal
                        // }
                      >
                        <Box
                          display={"flex"}
                          alignItems={"center"}
                          gap={"1rem"}
                          marginBottom={"1rem"}
                        >
                          <Image src={subnetsIcon} width={`${iconwidth}`} />
                          HealthTech
                        </Box>
                      </Link>
                    </PopoverBody>
                  </PopoverContent>
                </Popover> */}

                <Link to="/" className="link" style={{ position: "relative" }}>
                  <Button
                    backgroundColor={"transparent"}
                    color={"#fff"}
                    fontWeight={"400"}
                    _hover={{
                      backgroundColor: "transparent",
                    }}
                    _focus={{
                      boxShadow: "none",
                    }}
                  >
                    FOUNDATION
                  </Button>
                  {/* <span
                    style={location.pathname === "/" ? active : linkStyle}
                  /> */}
                </Link>

                <Link
                  to="/Contact"
                  className="link"
                  style={{
                    display: "flex",
                    alignItems: "center",
                    gap: "5px",
                    position: "relative",
                  }}
                  onMouseEnter={(e) => {
                    const arrowRight = document.querySelector(".arrow");
                    arrowRight.style.transform = "rotate(45deg)";
                  }}
                  onMouseLeave={(e) => {
                    const arrowRight = document.querySelector(".arrow");
                    arrowRight.style.transform = "none";
                  }}
                >
                  <Button
                    backgroundColor={"transparent"}
                    color={"#fff"}
                    fontWeight={"400"}
                    _hover={{
                      backgroundColor: "transparent",
                    }}
                    _focus={{
                      boxShadow: "none",
                    }}
                  >
                    CONTACT US
                  </Button>
                  <span
                    style={
                      location.pathname === "/Contact" ? active : linkStyle
                    }
                  />
                  <Image
                    src={arrow}
                    className="arrow"
                    style={{
                      transition: "transform 0.3s",
                    }}
                  />
                </Link>
              </Box>
            </Box>
          </Box>
        </>
      ) : (
        <MobileMenu />
      )}
      <Outlet />
    </>
  );
};

export default NavBar;