import Image from "next/image";
import { Box, Typography } from "@mui/material";
import { OnboardingButton } from "components/onboarding/buttons";
import iconArrow from "assets/svg/onboarding/icon-small-arrow-white.svg";
import { OnboardingLink } from "components/onboarding";
import topBarLeft from "assets/svg/onboarding/tutorial/top-bar-left.svg";
import chromeBarLeft from "assets/svg/onboarding/tutorial/chrome-bar-left.svg";
import chromeAwsTab from "assets/svg/onboarding/tutorial/chrome-aws-tab.svg";
import topBarArrow from "assets/svg/onboarding/tutorial/top-bar-arrow.svg";
import lowerBarLeft from "assets/svg/onboarding/tutorial/lower-bar-left.svg";
import lowerBarRight from "assets/svg/onboarding/tutorial/lower-bar-right.svg";
import iconLock from "assets/svg/onboarding/tutorial/icon-lock.svg";
import { Link } from "./aws-link";
import iconShare from "assets/svg/onboarding/tutorial/icon-url-share.svg";
import iconStar from "assets/svg/onboarding/tutorial/icon-star.svg";
import iconsRightUrlBar from "assets/svg/onboarding/tutorial/icons-right-url-bar.svg";
import mainWhole from "assets/svg/onboarding/tutorial/main-whole.svg";
import breadCrumbs from "assets/svg/onboarding/tutorial/breadcrumbs.svg";
import awsHeaderLeft from "assets/svg/onboarding/tutorial/aws-header-left.svg";
import awsHeaderRight from "assets/svg/onboarding/tutorial/aws-header-right.svg";
import { useEffect, useRef, useState } from "react";
import { useOnboarding } from "context/OnboardingContext";

const steps = [
  {
    description: "We’ll open AWS console in a new tab",
    icon: <Image src="" alt="We'll open a new tab" />,
  },
  {
    description:
      "Scroll down, check the checkbox, and press the button “Create stack”",
    icon: <Image src="" alt="Connect on AWS" />,
  },
  {
    description: "Then you can close AWS console, we’ll do the rest :)",
    icon: <Image src="" alt="Now you can close AWS" />,
  },
];

const StepDots = ({ step }: any) => {
  return (
    <Box
      sx={{
        display: "flex",
        alignItems: "center",
        gap: "10px",
      }}
    >
      {[1, 2, 3].map((_, index) => (
        <Box
          key={index}
          sx={{
            width: "5px",
            height: "5px",
            borderRadius: "100%",
            background:
              step === index
                ? "rgba(255, 255, 255, 1)"
                : "rgba(255, 255, 255, 0.3)",
            transition: "background 0.3s",
          }}
        ></Box>
      ))}
    </Box>
  );
};

const AwsTile = ({ children, title, style }: any) => {
  return (
    <Box
      sx={{
        boxShadow: "0px 1px 1px rgba(0, 0, 0, 0.3)",
        maxWidth: "900px",
        ...style,
        alignSelf: "normal",
      }}
    >
      <Box
        sx={{
          padding: "21px 20px 24px 20px",
          background: "#FAFAFA",
          borderBottom: "1px solid #EAEDED",
        }}
      >
        <Box
          sx={{
            display: "flex",
            gap: "7px",
          }}
        >
          <Typography
            sx={{
              fontWeight: 700,
              lineHeight: "22px",
              fontSize: "18px",
              color: "#17191E",
            }}
          >
            {title}
          </Typography>
        </Box>
      </Box>
      <Box
        sx={{
          background: "#FFFFFF",
          padding: "17px 20px",
        }}
      >
        {children}
      </Box>
    </Box>
  );
};

const SmallestTitle = ({ children, style }: any) => (
  <Typography
    sx={{
      fontSize: "14px",
      lineHeight: "22px",
      color: "#16191E",
      ...style,
    }}
  >
    {children}
  </Typography>
);

const SmallLabel = ({ children, style }: any) => (
  <Typography
    sx={{
      fontSize: "12px",
      lineHeight: "16px",
      color: "#555B63",
      ...style,
    }}
  >
    {children}
  </Typography>
);

const AwsInput = ({ children, style }: any) => (
  <Box
    sx={{
      padding: "8px 9px",
      borderRadius: "2px",
      border: "1px solid #AAB7B8",
      ...style,
    }}
  >
    <Typography
      sx={{
        fontSize: "14px",
        lineHeight: "16px",
        color: "#16191F",
      }}
    >
      {children}
    </Typography>
  </Box>
);

const TutorialVisual = ({ tutorialStep }: any) => {
  const awsUI = useRef<any>();
  const [overlayVisibe, setOverlayVisible] = useState(true);
  // const [overlayVisibe, setOverlayVisible] = useState(false);
  const [tabZIndex, setTabZIndex] = useState(3);

  useEffect(() => {
    console.log("tutorialStep", tutorialStep);

    if (tutorialStep === 1) {
      setOverlayVisible(false);
      setTimeout(() => {
        awsUI.current.scrollTop = 10000;
      }, 500);
      setTimeout(() => {
        setTabZIndex(0);
      }, 150);
      setTimeout(() => {
        setOverlayVisible(true);
      }, 1000);
    }
  }, [tutorialStep]);

  return (
    <Box
      className="outer"
      sx={{
        display: "flex",
        flexDirection: "column",
        borderRadius: "9px",
        height: "100%", // allows scrolling
        border: "1px solid #414141",
        opacity: tutorialStep === 2 ? 0 : 1,
        transition: "opacity 0.3s",
        position: "relative",
        overflow: "hidden",
      }}
    >
      <Box
        sx={{
          width: "100%",
          height: "100%",
          position: "absolute",
          inset: 0,
          background: "rgba(0, 0, 0, 0.7)",
          zIndex: 2,
          opacity: overlayVisibe ? 1 : 0,
          transition: "opacity 0.3s",
          pointerEvents: "none",
        }}
      />
      <Box>
        <Box
          sx={{
            display: "flex",
            justifyContent: "space-between",
            background: "#202124",
          }}
        >
          <Box
            sx={{
              display: "flex",
              alignItems: "end",
            }}
          >
            <Image src={chromeBarLeft} alt=""></Image>
            <Image
              style={{
                zIndex: tabZIndex,
              }}
              src={chromeAwsTab}
              alt=""
            ></Image>
          </Box>
          <Image src={topBarArrow} alt=""></Image>
        </Box>
        <Box
          sx={{
            display: "flex",
            background: "#35363A",
          }}
        >
          <Image src={lowerBarLeft} alt=""></Image>
          <Box
            sx={{
              flex: 1,
              borderBottom: "1px solid #606164",
              padding: "4px 0",
            }}
          >
            <Box
              sx={{
                display: "flex",
                alignItems: "center",
                padding: "0 10px",
                height: "100%",
                background: "#202024",
                borderRadius: "100vw",
              }}
            >
              <Image src={iconLock} alt=""></Image>
              <Typography
                sx={{
                  flex: 1,
                  fontSize: "12px",
                  lineHeight: "14px",
                  color: "#FFFFFF",
                  marginLeft: "10px",
                  whiteSpace: "nowrap",
                  textOverflow: "ellipsis",
                  width: "100px",
                  overflow: "hidden",
                }}
              >
                <Link />
              </Typography>
              <Image src={iconsRightUrlBar} alt=""></Image>
            </Box>
          </Box>
          <Image src={lowerBarRight} alt=""></Image>
        </Box>
        <Box
          sx={{
            display: "flex",
            justifyContent: "space-between",
            background: "#232F3E",
            height: "41px",
            borderBottom: "1px solid #606164",
          }}
        >
          <Image src={awsHeaderLeft} alt=""></Image>
          <Image src={awsHeaderRight} alt=""></Image>
        </Box>
      </Box>

      <Box
        ref={awsUI}
        sx={{
          flex: 1,
          backgroundColor: "#F2F3F3",
          padding: "21px 40px",
          display: "flex",
          flexDirection: "column",
          alignItems: "flex-start",
          width: "100%",
          overflow: "auto",
          scrollBehavior: "smooth",
        }}
      >
        <Box>
          <Image src={breadCrumbs} alt=""></Image>
        </Box>
        <Typography
          sx={{
            fontSize: "28px",
            lineHeight: "36px",
            color: "#16191E",
            marginTop: "28px",
          }}
        >
          Quck create stack
        </Typography>
        <AwsTile
          style={{
            marginTop: "20px",
          }}
          title="Template"
        >
          <SmallestTitle>Template URL</SmallestTitle>
          <SmallestTitle>
            https://digger-aws-connection-template.s3.amazonaws.com/roleTemplate.yml
          </SmallestTitle>
          <SmallestTitle
            style={{
              marginTop: "20px",
            }}
          >
            Stack description
          </SmallestTitle>
          <SmallestTitle>
            This stack creates an IAM role that can be used by Digger for use in
            deployments.
          </SmallestTitle>
        </AwsTile>
        <AwsTile
          style={{
            marginTop: "20px",
          }}
          title="Stack name"
        >
          <SmallestTitle>Stack name</SmallestTitle>
          <AwsInput
            style={{
              marginTop: "7px",
            }}
          >
            DiggerRoleStack-0b6e93fb-0008-43f4-ab9c-8d554ad981f9
          </AwsInput>
          <SmallLabel
            style={{
              marginTop: "4px",
            }}
          >
            Stack name can include letters (A-Z and a-z), numbers (0-9), and
            dashes (-).
          </SmallLabel>
        </AwsTile>
      </Box>
    </Box>
  );
};

export const Tutorial = () => {
  const { tutorialStep, setTutorialStep } = useOnboarding();
  const changeStep = (step: any) => {
    setTutorialStep(step);
  };
  const [tutorialVisibe, setTutorialVisibe] = useState(true);

  useEffect(() => {
    if (tutorialStep === 2) {
      setTimeout(() => {
        setTutorialVisibe(false);
      }, 150);
    } else {
      setTutorialVisibe(true);
    }
  }, [tutorialStep]);

  return (
    <Box
      sx={{
        display: "flex",
        marginTop: "50px",
        flexDirection: "column",
        gap: "27px",
        transition: "height 0.3s",
        flex: 1,
      }}
    >
      <Box
        sx={{
          width: "100%",
          height: tutorialStep === 2 ? "116px" : "60%",
          overflow: "hidden",
          background: tutorialStep === 2 ? "rgba(0, 0, 0, 0.3)" : "transparent",
          borderRadius: "5px",
          transition: "0.3s",
        }}
      >
        {tutorialVisibe && <TutorialVisual tutorialStep={tutorialStep} />}
      </Box>
      <Box
        sx={{
          display: "flex",
          gap: "50px",
        }}
      >
        <Box
          sx={{
            display: "flex",
            alignItems: "center",
            flex: 1,
            gap: "24px",
            height: "40px",
          }}
        >
          <StepDots step={tutorialStep} />
          <Typography>{steps[tutorialStep].description}</Typography>
        </Box>
        <Box
          sx={{
            display: "flex",
            alignItems: "center",
          }}
        >
          {tutorialStep !== 2 && (
            <OnboardingButton
              buttonSize="small"
              EndIcon={iconArrow}
              outlinedIcon
              noflex
              onClick={() => changeStep((prev: any) => Math.min(prev + 1, 2))}
            >
              Next
            </OnboardingButton>
          )}
          {tutorialStep === 2 && (
            <Box
              sx={{
                display: "flex",
                gap: "24px",
              }}
            >
              <OnboardingLink secondary onClick={() => changeStep(0)}>
                Replay tutorial
              </OnboardingLink>
              <OnboardingLink href="https://youtu.be/KNmeK_vhy1A">
                Watch video explanation
              </OnboardingLink>
            </Box>
          )}
        </Box>
      </Box>
    </Box>
  );
};