// React, NextJS
import App from "next/app";
import Script from 'next/script'
import Head from "next/head";

import { setCookie, getCookie } from 'cookies-next';

// GSAP
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";

// helper functions
import { getWidth } from "../components/utils.jsx";

// css imports
import 'bootstrap/dist/css/bootstrap.min.css';
import "../styles/globals.scss";
import "../styles/footer.scss";
import "../styles/navbar.scss";
import "../styles/darkmode.scss";

// Register plugin only on client
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")) {
      if (getWidth() > 1200) {
        this.tl.from(".landing-img", {
          opacity: 0,
          scale: 1.1
        });
      } else {
        this.tl.from(".landing-img", {
          opacity: 0,
        });
      }
    }

    if (document.querySelector(".landing-logo")) {
      if (getWidth() > 1200) {
        this.tl.from(".landing-logo", {
          opacity: 0,
          y: 10,
          scale: 0.9
        }, "<");
      } else {
        this.tl.from(".landing-logo", {
          opacity: 0,
          y: 10,
          scale: 0.9
        }, "<");
      }
    }






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

    if (document.querySelector(".products-img-icon-wrapper")) {
      if (getWidth() > 1200) {
        this.tl.from(".products-img-icon-wrapper", {
          backdropFilter: "blur(0px)",
          backgroundColor: "rgba(13, 13, 13, 0)",
          width: "75vw"
        });
      }
      else {
        {
          this.tl.from(".products-img-icon-wrapper", {
            backdropFilter: "blur(0px)",
            backgroundColor: "rgba(13, 13, 13, 0)",
            width: "75vh"
          }, ">-0.35");
        }
      }
    }

    if (document.querySelector(".products-icon")) {
      this.tl.from(".products-icon", {
        opacity: 0,
      }, ">-0.25");
    }

    if (document.querySelector(".mainheading")) {
      if (getWidth() > 1200) {
        this.tl.from(".mainheading", {
          opacity: 0,
          x: 10,
        }, ">");
      } else {
        this.tl.from(".mainheading", {
          opacity: 0,
          y: 10,
        }, ">");
      }
    }

    if (document.querySelector(".subheading")) {
      if (getWidth() > 1200) {
        this.tl.from(".subheading", {
          opacity: 0,
          x: 10,
        }, ">-0.25");
      } else {
        this.tl.from(".subheading", {
          opacity: 0,
          y: 10,
        }, ">-0.25");
      }
    }

    if (document.querySelector(".description")) {
      if (getWidth() > 1200) {
        this.tl.from(
          ".description",
          {
            opacity: 0,
            x: 10,
          },
          ">-0.25"
        );
      } else {
        this.tl.from(
          ".description",
          {
            opacity: 0,
            y: 10,
          },
          ">-0.25"
        );
      }
    }

    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-container")) {
      if (getWidth() > 1200) {
        this.tl.to(
          ".products-img-container",
          {
            opacity: 0,
            width: 0,
            duration: 0.5,
          },
          0
        );
      } else {
        this.tl.to(
          ".products-img-container",
          {
            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 />
        <main>
          <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>
        </main>
        <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>
        </>
      </>
    );
  }
}