text: import React, { useState, useRef } from "react";
  import PropTypes from "prop-types";
  import Fade from "react-reveal/Fade";
  import { useStaticQuery, graphql, Link } from "gatsby";
  import ScrollSpyMenu from "common/components/ScrollSpyMenu";
  import Scrollspy from "react-scrollspy";
  import AnchorLink from "react-anchor-link-smooth-scroll";
  import { Icon } from "react-icons-kit";
  import { menu } from "react-icons-kit/feather/menu";
  import { x } from "react-icons-kit/feather/x";
  import { search } from "react-icons-kit/feather/search";
  import Logo from "common/components/UIElements/Logo";
  import Button from "common/components/Button";
  import Container from "common/components/UI/Container";
  import useOnClickOutside from "common/hooks/useOnClickOutside";
  import NavbarWrapper, { MenuArea, MobileMenu, Search } from "./navbar.style";
  import LogoImage from "common/assets/image/cryptoModern/logo-white.png";
  
  const Navbar = (props) => {
    const { isHome = false } = props;
    const data = useStaticQuery(graphql`
      query {
        cryptoModernJson {
          navbar {
            logo {
              publicURL
            }
            navMenu {
              id
              label
              path
              offset
              staticLink
            }
            secondaryNavMenu {
              id
              label
              path
              offset
              staticLink
            }
          }
        }
      }
    `);
    const { navMenu, secondaryNavMenu } = data.cryptoModernJson.navbar;
    const [state, setState] = useState({
      search: "",
      searchToggle: false,
      mobileMenu: false,
    });
  
    const searchRef = useRef(null);
    useOnClickOutside(searchRef, () =>
      setState({ ...state, searchToggle: false })
    );
  
    const toggleHandler = (type) => {
      if (type === "search") {
        setState({
          ...state,
          search: "",
          searchToggle: !state.searchToggle,
          mobileMenu: false,
        });
      }
  
      if (type === "menu") {
        setState({
          ...state,
          mobileMenu: !state.mobileMenu,
        });
      }
    };
  
    const handleOnChange = (event) => {
      setState({
        ...state,
        search: event.target.value,
      });
    };
  
    const handleSearchForm = (event) => {
      event.preventDefault();
  
      if (state.search !== "") {
        console.log("search data: ", state.search);
  
        setState({
          ...state,
          search: "",
        });
      } else {
        console.log("Please fill this field.");
      }
    };
  
    const scrollItems = [];
  
    navMenu.forEach((item) => {
      scrollItems.push(item.path.slice(1));
    });
  
    secondaryNavMenu.forEach((item) => {
      scrollItems.push(item.path.slice(1));
    });
  
    const handleRemoveMenu = () => {
      setState({
        ...state,
        mobileMenu: false,
      });
    };
  
    const renderHomeLink = () => {
      if (!isHome) {
        return (
          <a href="/">
            <Logo logoSrc={LogoImage} title="DS10X" className="main-logo" />
          </a>
        );
      }
  
      return (
        <AnchorLink href="#home" offset={menu.offset} onClick={handleRemoveMenu}>
          <Logo logoSrc={LogoImage} title="DS10X" className="main-logo" />
        </AnchorLink>
      );
    };
  
    return (
      <NavbarWrapper className="navbar">
        <Container>
          {renderHomeLink()}
          <MenuArea className={state.searchToggle ? "active" : ""}>
            <ScrollSpyMenu
              className="menu"
              menuItems={isHome ? navMenu : secondaryNavMenu}
              offset={-84}
            />
            {/* end of main menu */}
  
            <Link to="/">
              <Button className="trail" title="Go to App" />
            </Link>
  
            <Button
              className="menubar"
              icon={
                state.mobileMenu ? (
                  <Icon className="bar" icon={x} />
                ) : (
                  <Fade>
                    <Icon className="close" icon={menu} />
                  </Fade>
                )
              }
              color="#0F2137"
              variant="textButton"
              onClick={() => toggleHandler("menu")}
            />
          </MenuArea>
        </Container>
  
        {/* start mobile menu */}
        <MobileMenu className={`mobile-menu ${state.mobileMenu ? "active" : ""}`}>
          <Container>
            <Scrollspy
              className="menu"
              items={scrollItems}
              offset={-84}
              currentClassName="active"
            >
              {navMenu.map((menu, index) => (
                <li key={`menu_key${index}`}>
                  <AnchorLink
                    href={menu.path}
                    offset={menu.offset}
                    onClick={handleRemoveMenu}
                  >
                    {menu.label}
                  </AnchorLink>
                </li>
              ))}
            </Scrollspy>
          </Container>
        </MobileMenu>
        {/* end of mobile menu */}
      </NavbarWrapper>
    );
  };
  
  Navbar.propTypes = {
    isHome: PropTypes.bool,
  };
  
  export default Navbar;
  