/* eslint-disable quotes */
import Image from "next/image";
import React, { useEffect, useState } from "react";
import styled, { keyframes, useTheme } from "styled-components";

import darkMockup from "../public/images/mockups/darkmockup.webp";
import lightMockup from "../public/images/mockups/lightmockup.webp";

const MockupKeyframes = (mockupScale = 3) => keyframes`
  0% {
    transform: scale(${mockupScale});
  }
  100% {
    transform: scale(1);
  }
`;

const ScaleLogo = keyframes`
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(0);
    opacity: 0;
  }
`;

const ScaleBackground = (backgroundScale = 2.4) => keyframes`
  0% {
    transform: scale(${backgroundScale});
  }
  100% {
    transform: scale(0.766);
  }
`;

const animateTerminal = (adjustTransform = -250) => keyframes`
  0% {
    transform: translate3d(-400px, ${adjustTransform}vh, 0) scale(2.2);
  }
  100% {
    transform: translate3d(-143px, -81px, 0) scale(1);
  }
`;

const animateNotepad = (adjustTransform = "22%") => keyframes`
  0% {
    transform: translate3d(-100vw, ${adjustTransform}, 0) scale(2.2);
  }
  100% {
    transform: translate3d(190px, 20px, 0) scale(1);
  }
`;

const animateCalculator = (adjustTransform = "-178%") => keyframes`
  0% {
    transform: translate3d(-100vw, ${adjustTransform}, 0) scale(2.2);
  }
  100% {
    transform: translate3d(-253px, 104px, 0) scale(1);
  }
`;

const animateToolbar = () => keyframes`
  0% {
    transform: translateY(312px);
    opacity:0;
  }
  100% {
    transform: translateY(281px);
    opacity: 1;
  }
`;

const Wrapper = styled.div`
  position: relative;
  max-width: 100vw;
  overflow-x: hidden;
  z-index: 1;
`;

const LogoContainer = styled.div`
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1;
  width: 100vw;
  height: 100vh;
  will-change: transform;
  animation: ${ScaleLogo} 1.9s cubic-bezier(0.66, 0, 0.2, 1) 0.433s forwards;
`;

const Logo = styled.img`
  filter: brightness(0) invert(1);
`;

const MockupContainer = styled.div`
  position: relative;
  display: flex;
  min-height: 100vh;
  padding-top: 50px;
  align-items: center;
  will-change: transform;
  justify-content: center;
  overflow: hidden;
`;

const Mockup = styled.img`
  margin: 50px;
  height: auto;
  width: 1280px;
  will-change: transform;
  z-index: 1;
  animation: ${MockupKeyframes()} 2.2s cubic-bezier(0.66, 0, 0.2, 1) 0.133s
    forwards;
`;

const Background = styled.div`
  position: absolute;
  width: 1314px;
  height: 100%;
  bottom: -6px;
  background: ${({ theme }) =>
    theme.type === "dark"
      ? 'url("/images/darkModeBackground.svg")'
      : 'url("/images/lightModeBackground.svg")'};
  background-repeat: no-repeat;
  background-size: 1314px;
  background-position: center;
  will-change: transform;
  z-index: 0;
  transform: scale(2.2);
  animation: ${ScaleBackground()} 2.2s cubic-bezier(0.66, 0, 0.2, 1) 0.133s
    forwards;
`;
const Terminal = styled.div`
  position: absolute;
  height: 323px;
  width: 571px;
  background: url("/images/terminal.webp");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  will-change: transform;
  z-index: 1;
  transform: translate3d(-400px, -250vh, 0) scale(2.2);
  animation: ${animateTerminal()} 2.2s cubic-bezier(0.66, 0, 0.2, 1) 0.133s
    forwards;
  animation-delay: 0.3s;
`;

const Notepad = styled.div`
  position: absolute;
  height: 356px;
  width: 557px;
  background: url("/images/textEditor.webp");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  will-change: transform;
  z-index: 2;
  transform: translate3d(-100vw, 22%, 0) scale(2.2);
  animation: ${animateNotepad()} 1.8s cubic-bezier(0.66, 0, 0.2, 1) 0.133s
    forwards;
  animation-delay: 0.5s;
`;

const Calculator = styled.div`
  position: absolute;
  height: 296px;
  width: 305px;
  background: url("/images/calculator.webp");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  will-change: transform;
  z-index: 3;
  transform: translate3d(-100vw, 178%, 0) scale(2.2);
  animation: ${animateCalculator()} 1.8s cubic-bezier(0.66, 0, 0.2, 1) 0.133s
    forwards;
  animation-delay: 0.6s;
`;

const Toolbar = styled.div`
  position: absolute;
  height: 100%;
  width: 1011px;
  background: ${({ theme }) =>
    theme.type === "dark"
      ? 'url("/images/darkToolbar.svg")'
      : 'url("/images/lightToolbar.svg")'};
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  z-index: 0;
  opacity: 0;
  transform: translateY(312px);
  animation: ${animateToolbar} 1s cubic-bezier(0.66, 0, 0.2, 1) 0.133s forwards;
  animation-delay: 1.85s;
`;

const MockupImageContainer = styled.div`
  padding: 25px;
  margin-top: 80px;
`;

const Intro = () => {
  const [windowSize, setWindowSize] = useState<number>(0);
  const theme = useTheme();

  useEffect(() => {
    setWindowSize(window.innerWidth);
  }, []);

  return (
    // without setting a tabindex here, this area isn't selectable.
    <Wrapper tabIndex={0}>
      {windowSize >= 1075 ? (
        <>
          <LogoContainer>
            <Logo
              alt="dahliaOS logo"
              src={"/images/logos/logo-color.png"}
              draggable={false}
            />
          </LogoContainer>
          <MockupContainer>
            <Mockup
              alt="Macbook mockup"
              src={"/images/mockups/macbook.webp"}
              draggable={false}
            />
            <Background draggable={false} />
            <Calculator draggable={false} />
            <Terminal draggable={false} />
            <Notepad draggable={false} />
            <Toolbar draggable={false} />
          </MockupContainer>
        </>
      ) : (
        <MockupImageContainer>
          <Image
            alt="Dark mockup"
            src={theme.type === "dark" ? darkMockup : lightMockup}
            width={1280}
            height={720}
            layout="responsive"
          />
        </MockupImageContainer>
      )}
    </Wrapper>
  );
};

export default Intro;