import React from "react";
import Image from "next/image";
import { withRouter } from "next/router";
import { gsap } from "gsap/dist/gsap";
import { ScrollTrigger } from "gsap/dist/ScrollTrigger.js";

import Link from "next/link";

import Logo from "./media/logo.jsx";
import laserteileImg from './images/fertigungsverfahren/laserteile.svg'
import stanzteileImg from './images/fertigungsverfahren/stanzteile.svg'
import biegeteileImg from './images/fertigungsverfahren/biegeteile.svg'
import lasergravurImg from './images/fertigungsverfahren/lasergravur.svg'
import blechkonstruktionImg from './images/fertigungsverfahren/blechkonstruktion.svg'
import baugruppenImg from './images/fertigungsverfahren/baugruppen.svg'
import fuegeverfahrenImg from './images/fertigungsverfahren/fuegeverfahren.svg'
import entgrattechnikImg from './images/fertigungsverfahren/entgrattechnik.svg'

gsap.registerPlugin(ScrollTrigger);

class Navbar extends React.Component {
  constructor(props) {
    super(props);

    this.toggle = this.toggle.bind(this);
    this.toggleClose = this.toggleClose.bind(this);
    this.isLg = this.isLg.bind(this);

    this.state = {
      isOpen: false,
      menuitems: [
        {
          key: 0,
          name: "Home",
          link: "/",
        },
        {
          key: 1,
          name: "Fertigungsverfahren",
          link: "/fertigungsverfahren/laserteile",
        },
        {
          key: 2,
          name: "Materialien",
          link: "/materialien",
        },
        {
          key: 3,
          name: "Qualität",
          link: "/qualitaet",
        },
        {
          key: 4,
          name: "Branchen",
          link: "/branchen",
        },
        {
          key: 5,
          name: "Kontakt",
          link: "/kontakt",
        },
      ]
    };
  }

  componentDidUpdate(props, prevProps) {
    if (this.props.isOpen !== prevProps.isOpen) {
      if (this.state.isOpen) {
        gsap.to(".navbar-collapse", {
          height: "auto",
        });
      } else if (!this.state.isOpen) {
        if (!this.isLg()) {
          gsap.to(".navbar-collapse", {
            height: 0,
          });
        }
      }
    }
  }

  toggle() {
    this.setState({
      isOpen: !this.state.isOpen,
    });
  }
  toggleClose() {
    this.setState({
      isOpen: false,
    });
  }

  isLg() {
    if (
      (self.innerWidth && self.innerWidth >= 992) ||
      (document.documentElement &&
        document.documentElement.clientWidth &&
        document.documentElement.clientWidth >= 992) ||
      (document.body && document.body.clientWidth >= 992)
    ) {
      return true;
    } else {
      return false;
    }
  }

  componentDidMount() {
    if (!this.isLg()) {
      gsap.set(".navbar-collapse", {
        height: 0,
      });
    }

    let targets = gsap.utils.toArray(".subnav-container div");

    gsap
      .timeline({
        scrollTrigger: {
          trigger: "body",
          start: "top+=200 top",
          end: "+=300",
          scrub: 0.1,
        },
      })
      .to(".subnav-container", {
        height: 0,
        ease: "power1.inOut",
      })
      .to(
        targets,
        {
          opacity: 0,
          ease: "power4.inOut",
        },
        0
      );
  }

  render() {
    const pathname = this.props.router.pathname;
    return (
      <>
        <nav
          className="noselect navbar navbar-expand-lg fixed-top"
          onToggle={this.toggle}
        >
          <Link href="/" onClick={this.toggleClose} className="navbar-brand">

            <Logo />

          </Link>
          <button
            onClick={this.toggle}
            className="navbar-toggler"
            type="button"
            aria-label="open menu"
          >
            <div
              className={
                this.state.isOpen ? "animated-icon open" : "animated-icon"
              }
            >
              <span />
              <span />
              <span />
              <span />
            </div>
          </button>
          <div className="mainnav-container d-flex justify-content-around">
            <div className="navbar-collapse">
              <div className="navbar-nav">
                {this.state.menuitems.map((menuitem, index) => (
                  <div key={menuitem.key} className="nav-item">
                    <Link href={menuitem.link} onClick={this.toggleClose}>

                      {menuitem.name}

                    </Link>
                  </div>
                ))}
              </div>
            </div>
          </div>

          <div className="subnav-container d-flex flex-row flex-nowrap align-items-center">
            <div className="nav-subitem">
              <Link
                href={"/fertigungsverfahren/laserteile"}
                className="nav-link"
              >
                <Image
                  src={laserteileImg}
                  alt="Laserteile Icon"
                  width={50}
                  height={50}
                />
                <div>Laserteile</div>

              </Link>
            </div>

            <div className="nav-subitem">
              <Link
                href={"/fertigungsverfahren/stanzteile"}
                className="nav-link"
              >

                <Image
                  src={stanzteileImg}
                  alt="Stanzteile Icon"
                  width={50}
                  height={50}
                />
                <div>Stanzteile</div>

              </Link>
            </div>

            <div className="nav-subitem">
              <Link
                href={"/fertigungsverfahren/biegeteile"}
                className="nav-link"
              >

                <Image
                  src={biegeteileImg}
                  alt="Biegeteile Icon"
                  width={50}
                  height={50}
                />
                <div>Biegeteile</div>

              </Link>
            </div>

            <div className="nav-subitem">
              <Link
                href={"/fertigungsverfahren/lasergravur"}
                className="nav-link"
              >

                <Image
                  src={lasergravurImg}
                  alt="Lasergravur Icon"
                  width={50}
                  height={50}
                />
                <div>Lasergravur</div>

              </Link>
            </div>

            <div className="nav-subitem">
              <Link
                href={"/fertigungsverfahren/blechkonstruktionen"}
                className="nav-link"
              >

                <Image
                  src={blechkonstruktionImg}
                  alt="Blechkonstruktionen Icon"
                  width={50}
                  height={50}
                />
                <div>Blechkonstruktionen</div>

              </Link>
            </div>

            <div className="nav-subitem">
              <Link
                href={"/fertigungsverfahren/baugruppen"}
                className="nav-link"
              >

                <Image
                  src={baugruppenImg}
                  alt="Baugruppen Icon"
                  width={50}
                  height={50}
                />
                <div>Baugruppen</div>

              </Link>
            </div>

            <div className="nav-subitem">
              <Link
                href={"/fertigungsverfahren/fügeverfahren"}
                className="nav-link"
              >

                <Image
                  src={fuegeverfahrenImg}
                  alt="Fügeverfahren Icon"
                  width={50}
                  height={50}
                />
                <div>Fügeverfahren</div>

              </Link>
            </div>

            <div className="nav-subitem">
              <Link
                href={"/fertigungsverfahren/entgrattechnik"}
                className="nav-link"
              >

                <Image
                  src={entgrattechnikImg}
                  alt="Entgrattechnik Icon"
                  width={50}
                  height={50}
                />
                <div>Entgrattechnik</div>

              </Link>
            </div>


          </div>
        </nav>
      </>
    );
  }
}

export default withRouter(Navbar);