import React, { useState, useEffect, useRef } from "react";
import {
  Collapse,
  Navbar,
  NavbarToggler,
  NavbarBrand,
  Nav,
  NavItem,
} from "reactstrap";
import { HouseFill, CodeSlash, Grid1x2Fill } from "react-bootstrap-icons";
import { Link } from "gatsby";
import { TimelineLite, Power3 } from "gsap";
import "bootstrap/dist/css/bootstrap.min.css";
import "../sass/navbar.sass";

const Menu = (props) => {
  const [isOpen, setIsOpen] = useState(false);
  const toggle = () => setIsOpen(!isOpen);

  let brandName = useRef(null);
  let pageLink1 = useRef(null);
  let pageLink2 = useRef(null);
  let pageLink3 = useRef(null);

  let tl = new TimelineLite();
  useEffect(() => {
    tl.from(brandName, 4, { x: -500, ease: Power3.easeOut }, 0)
      .from(pageLink1, 3, { x: 1000, ease: Power3.easeOut }, 0)
      .from(pageLink2, 3, { x: 1100, ease: Power3.easeOut }, 0)
      .from(pageLink3, 3, { x: 1200, ease: Power3.easeOut }, 0);
  });
  return (
    <Navbar light expand="md" className="background-blue sticky-top">
      <div className="container">
        <NavbarBrand href="/" style={{ fontWeight: "bold", color: "#eee" }}>
          <div ref={(el) => (brandName = el)}>
            <img src="/img/logowhite.png" alt="" style={{ width: "30px" }} />{" "}
            KJSCE CodeCell
          </div>
        </NavbarBrand>
        <NavbarToggler onClick={toggle} style={{ background: "#666" }} />
        <Collapse
          isOpen={isOpen}
          navbar
          style={{
            justifyContent: "space-between",
          }}
        >
          <Nav className="ml-auto" navbar>
            <div ref={(el) => (pageLink1 = el)}>
              <NavItem className="mr-3">
                <Link to="/" className="links mr-2">
                  <HouseFill size={20} /> Home
                </Link>
              </NavItem>
            </div>
            <div ref={(el) => (pageLink2 = el)}>
              <NavItem className="mr-3">
                <Link to="/blog" className="links mr-2">
                  <Grid1x2Fill /> All Articles
                </Link>
              </NavItem>
            </div>
            <div ref={(el) => (pageLink3 = el)}>
              <NavItem>
                <Link to="/about" className="links">
                  <CodeSlash size={20} /> About
                </Link>
              </NavItem>
            </div>
          </Nav>
        </Collapse>
      </div>
    </Navbar>
  );
};

export default Menu;