/* eslint-disable no-unused-vars */
import { CloseIcon, HamburgerIcon } from "@chakra-ui/icons";
import {
  Menu,
  MenuButton,
  MenuList,
  MenuItem,
  Accordion,
  AccordionItem,
  AccordionButton,
  AccordionPanel,
  AccordionIcon,
  IconButton,
  Text,
} from "@chakra-ui/react";
import { Box, Image } from "@chakra-ui/react";
import { Link, useLocation } from "react-router-dom";
import { Button } from "@chakra-ui/react";
// import { HashLink } from "react-router-hash-link";
import logo from "../../assets/images/rubix.png";
import { useEffect, useState } from "react";

export const MobileMenu = () => {
  const [isScrolled, setIsScrolled] = useState(false);
  const [menu, setMenu] = useState(false);
  const location = useLocation();

  const handleClick = () => {
    setMenu(!menu);
  };

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

    window.addEventListener("scroll", handleScroll);

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

  const linkStyle = {
    color: "#fff",
    display: "block",
    padding: "15px 0",
  };

  const innerLink = {
    color: location.pathname === "/LearnPage" ? "rgb(222, 133, 142)" : "#fff",
    display: "block",
    padding: "15px 0",
  };

  return (
    <>
      <Box
        id="navbar"
        position={"fixed"}
        top={"0px"}
        zIndex={888}
        backgroundColor={isScrolled ? "#0B0B27" : "transparent"}
        display={"flex"}
        justifyContent={"space-between"}
        alignItems={"center"}
        width={"100%"}
        padding={"2rem 1rem"}
        // paddingTop={"3rem"}
        sx={{
          "@media (max-width: 1024px)": {},
          "@media (max-width: 375px)": {
            padding: "1rem",
            alignItems: "baseline",
          },
        }}
      >
        <Box display={"flex"} alignItems={"center"}>
          <Link to="/">
            <Box
              display={"flex"}
              alignItems={"baseline"}
              justifyContent={"center"}
            >
              <Image src={logo} width={"160px"} />
            </Box>
          </Link>
        </Box>
        <HamburgerIcon color={"#fff"} fontSize={"25px"} onClick={handleClick} />
      </Box>

      <Box
        position={"fixed"}
        top={"0px"}
        transform={menu ? "translateX(0)" : "translateX(100%)"}
        transition={"all 0.6s ease-in-out"}
        zIndex={999}
        backgroundColor={"#101015"}
        height={"100vh"}
        width={"100%"}
        overflow={"auto"}
        opacity={menu ? 1 : 0}
      >
        <Box
          // backgroundColor={isScrolled ? "#0B0B27" : "transparent"}
          display={"flex"}
          justifyContent={"space-between"}
          alignItems={"center"}
          padding={"2rem 1rem"}
          marginBottom={"2rem"}
          gap={"2rem"}
          sx={{
            "@media (max-width: 1024px)": {},
            "@media (max-width: 375px)": {
              padding: "1rem",
              alignItems: "baseline",
            },
          }}
        >
          <Box display={"flex"} alignItems={"center"}>
            <Link to="/" onClick={handleClick}>
              <Box
                display={"flex"}
                alignItems={"baseline"}
                justifyContent={"center"}
              >
                <Image src={logo} width={"160px"} />
              </Box>
            </Link>
          </Box>
          <CloseIcon color={"#fff"} fontSize={"16px"} onClick={handleClick} />
        </Box>

        <Accordion allowToggle>
          {/* Learn */}
          <AccordionItem borderTop={"none"} padding={"1rem 1rem"}>
            <AccordionButton>
              <Box as="span" flex="1" textAlign="left">
                <Text
                  color={"#B0B0B0"}
                  fontFamily={"Mona Sans"}
                  fontWeight={"500"}
                  fontSize={"16px"}
                >
                  LEARN
                </Text>
              </Box>
              <AccordionIcon color={"#fff"} fontSize={"28px"} />
            </AccordionButton>
            <AccordionPanel pb={4}>
              <Link to="/LearnPage" style={innerLink} onClick={handleClick}>
                Learn
              </Link>
              <Link
                to="https://learn.rubix.net/pop/"
                // target="_blank"
                // rel="noopener noreferrer"
                onClick={handleClick}
                style={linkStyle}
              >
                Proof-of-pledge Protocol
              </Link>
              <Link
                to="https://learn.rubix.net/smartcontract/"
                // target="_blank"
                // rel="noopener noreferrer"
                onClick={handleClick}
                style={linkStyle}
              >
                Smart Contracts
              </Link>
              <Link
                to="https://learn.rubix.net/tokenomics/"
                // target="_blank"
                // rel="noopener noreferrer"
                onClick={handleClick}
                style={linkStyle}
              >
                Tokenomics in Rubix
              </Link>
            </AccordionPanel>
          </AccordionItem>

          {/* Build */}
          <AccordionItem padding={"1rem 1rem"}>
            <AccordionButton>
              <Box as="span" flex="1" textAlign="left">
                <Text
                  color={"#B0B0B0"}
                  fontFamily={"Mona Sans"}
                  fontWeight={"500"}
                  fontSize={"16px"}
                >
                  BUILD
                </Text>
              </Box>
              <AccordionIcon color={"#fff"} fontSize={"28px"} />
            </AccordionButton>
            <AccordionPanel pb={4}>
              <Link to="/BuildPage" style={innerLink} onClick={handleClick}>
                Build
              </Link>
              <Link
                to="https://learn.rubix.net/node-setup/"
                // target="_blank"
                // rel="noopener noreferrer"
                onClick={handleClick}
                style={linkStyle}
              >
                Set up Rubix Node
              </Link>
              <Link
                to="https://learn.rubix.net/quorum/"
                // target="_blank"
                // rel="noopener noreferrer"
                onClick={handleClick}
                style={linkStyle}
              >
                Quorum
              </Link>
              <Link
                to="https://learn.rubix.net/subnets/"
                // target="_blank"
                // rel="noopener noreferrer"
                onClick={handleClick}
                style={linkStyle}
              >
                Subnets
              </Link>
            </AccordionPanel>
          </AccordionItem>

          {/* UseCases */}
          <AccordionItem padding={"1rem 1rem"}>
            <AccordionButton>
              <Box as="span" flex="1" textAlign="left">
                <Text
                  color={"#B0B0B0"}
                  fontFamily={"Mona Sans"}
                  fontWeight={"500"}
                  fontSize={"16px"}
                >
                  USE CASES
                </Text>
              </Box>
              <AccordionIcon color={"#fff"} fontSize={"28px"} />
            </AccordionButton>
            <AccordionPanel pb={4}>
              <Link to="/fin-tech" style={innerLink} onClick={handleClick}>
                FinTech
              </Link>
              <Link
                to="/ad-tech"
                // target="_blank"
                // rel="noopener noreferrer"
                style={innerLink}
                onClick={handleClick}
              >
                AdTech
              </Link>
              <Link
                to="/mar-tech"
                // target="_blank"
                // rel="noopener noreferrer"
                style={innerLink}
                onClick={handleClick}
              >
                MarTech
              </Link>
              <Link
                to="/health-tech"
                // target="_blank"
                // rel="noopener noreferrer"
                style={innerLink}
                onClick={handleClick}
              >
                HealthTech
              </Link>
              <Link
                to="/identity-security"
                // target="_blank"
                // rel="noopener noreferrer"
                style={innerLink}
                onClick={handleClick}
              >
                Identity and Security
              </Link>
              <Link
                to="/Telecom"
                // target="_blank"
                // rel="noopener noreferrer"
                style={innerLink}
                onClick={handleClick}
              >
                Telecom
              </Link>
            </AccordionPanel>
          </AccordionItem>

          {/* Community */}
          <AccordionItem padding={"1rem 1rem"}>
            <AccordionButton>
              <Box as="span" flex="1" textAlign="left">
                <Text
                  color={"#B0B0B0"}
                  fontFamily={"Mona Sans"}
                  fontWeight={"500"}
                  fontSize={"16px"}
                >
                  COMMUNITY
                </Text>
              </Box>
              <AccordionIcon color={"#fff"} fontSize={"28px"} />
            </AccordionButton>
            <AccordionPanel pb={4}>
              <Link to="/community" style={innerLink} onClick={handleClick}>
                Community
              </Link>
            </AccordionPanel>
          </AccordionItem>

          {/* Wallet*/}
          <AccordionItem padding={"1rem 1rem"}>
            <AccordionButton>
              <Box as="span" flex="1" textAlign="left">
                <Text
                  color={"#B0B0B0"}
                  fontFamily={"Mona Sans"}
                  fontWeight={"500"}
                  fontSize={"16px"}
                >
                  AFFILIATES
                </Text>
              </Box>
              <AccordionIcon color={"#fff"} fontSize={"28px"} />
            </AccordionButton>
            <AccordionPanel pb={4}>
              <Link
                to="https://rubixexplorer.com/"
                onClick={handleClick}
                style={linkStyle}
              >
                Wallet
              </Link>
              <Link
                to="https://getfexr.com/"
                onClick={handleClick}
                style={linkStyle}
              >
                Explore
              </Link>
            </AccordionPanel>
          </AccordionItem>
        </Accordion>

        <Link to="/Contact" onClick={handleClick}>
          <Button
            margin={"2rem 2rem"}
            padding={"1.5rem 2rem"}
            borderRadius="0px"
            backgroundImage="radial-gradient(circle, #ffffff, #eee2f2, #e7c3dc, #e5a3ba, #de858e)"
          >
            CONTACT US
          </Button>
        </Link>
      </Box>
    </>
  );
};