import App, { Container } from "next/app";
import Script from 'next/script'
import Head from "next/head";

import { gsap } from "gsap/dist/gsap";
import { SplitText } from "gsap/dist/SplitText";
import { Transition, SwitchTransition } from "react-transition-group";

// component imports
import Footer from "../components/footer.jsx";
import Navbar from "../components/navbar.jsx";

import { getWidth } from "../components/utils.jsx";
// css imports
import "bootstrap/dist/css/bootstrap.css";
import "../styles/globals.scss";
import "../styles/footer.scss";
import "../styles/navbar.scss";
import "../styles/darkmode.scss";

if (typeof window !== "undefined") {
  gsap.registerPlugin(SplitText);
}

export default class Site extends App {
  constructor(props) {
    super(props);

    this.handleEnter = this.handleEnter.bind(this);
    this.handleExit = this.handleExit.bind(this);
    this.initTl = this.initTl.bind(this);

    this.tl = gsap.timeline();

    this.state = {
      isReady: true,
    };
  }

  initTl() {
    if (document.querySelector(".landing-img")) {
      this.tl.from(".landing-img", {
        opacity: 0,
      });
    }

    if (document.querySelector(".products-img")) {
      if (getWidth() > 1200) {
        this.tl.from(".products-img", {
          opacity: 0,
          width: "100vw",
        });
      } else {
        this.tl.from(".products-img", {
          opacity: 0,
          height: "100vh",
        });
      }
    }

    if (document.querySelector(".mainheading")) {
      this.tl.from(".mainheading", {
        opacity: 0,
        y: 5,
      });
    }

    if (document.querySelector(".subheading")) {
      this.tl.from(".subheading", {
        opacity: 0,
        y: 5,
      });
    }

    if (document.querySelector(".description")) {
      this.tl.from(
        ".description",
        {
          opacity: 0,
          y: 5,
        },
        0.6
      );
    }

    if (document.querySelector(".quicknav")) {
      this.tl.from(".quicknav", {
        opacity: 0,
        x: -50,
      });
    }
  }

  handleEnter() {
    this.initTl();
    this.tl.play();
    this.setState({
      isReady: true,
    });
  }

  handleExit(node, done) {
    this.setState({
      isReady: false,
    });
    this.tl.clear();

    if (document.querySelector(".landing-img")) {
      this.tl.to(".landing-img", {
        scale: 0.9,
        opacity: 0,
      });
    }

    if (document.querySelector(".mainheading")) {
      this.tl.to(".mainheading", {
        opacity: 0,
        duration: 0.2,
      });
    }

    if (document.querySelector(".description")) {
      this.tl.to(
        ".description",
        {
          opacity: 0,
          duration: 0.2,
        },
        0
      );
    }

    if (document.querySelector(".products-icon")) {
      if (getWidth() > 1200) {
        this.tl.to(
          ".products-icon",
          {
            opacity: 0,
            duration: 0.1,
          },
          0
        );
      } else {
        this.tl.to(
          ".products-icon",
          {
            opacity: 0,
            height: 0,
            minHeight: 0,
            duration: 0.5,
          },
          0
        );
      }
    }

    if (document.querySelector(".products-img")) {
      if (getWidth() > 1200) {
        this.tl.to(
          ".products-img",
          {
            opacity: 0,
            width: 0,
            duration: 0.5,
          },
          0
        );
      } else {
        this.tl.to(
          ".products-img",
          {
            opacity: 0,
            height: 0,
            minHeight: 0,
            duration: 0.5,
          },
          0
        );
      }
    }

    this.tl.to(node, {
      opacity: 0,
      duration: 0.1,
      onComplete: done,
    });
  }

  render() {
    const { Component, pageProps, router } = this.props;
    let path = router.asPath;
    return (
      <>
        <Head>
          <link
            rel="apple-touch-icon"
            sizes="180x180"
            href="/apple-touch-icon.png"
          />
          <link
            rel="icon"
            type="image/png"
            sizes="32x32"
            href="/favicon-32x32.png"
          />
          <link
            rel="icon"
            type="image/png"
            sizes="16x16"
            href="/favicon-16x16.png"
          />
          <link rel="manifest" href="/site.webmanifest" />
          <meta name="msapplication-TileColor" content="#da532c" />
          <meta name="theme-color" content="#ffffff" />
          <meta httpEquiv="content-language" content="de" />
        </Head>
        <Navbar />
        <SwitchTransition mode="out-in">
          <Transition
            timeout={1000}
            addEndListener={(node, done) => {
              this.handleExit.bind(this);
            }}
            key={path}
            onEnter={this.handleEnter.bind(this)}
            onExit={(node, done) => this.handleExit(node, done)}
          >
            <Component {...pageProps} className="component" />
          </Transition>
        </SwitchTransition>
        <Footer />

        <Script
          src="https://www.googletagmanager.com/gtag/js?id=G-504FPVG74X"
          strategy="afterInteractive"
        />
        <Script id="google-analytics" strategy="afterInteractive">
          {`
          window.dataLayer = window.dataLayer || [];
          function gtag(){window.dataLayer.push(arguments);}
          gtag('js', new Date());

          gtag('config', 'G-504FPVG74X');
        `}
        </Script>
      </>
    );
  }
}
