import { useCallback, useEffect, useState } from "react";
import { SignInButton, useUser } from "@clerk/nextjs";
import { dark } from "@clerk/themes";
import clsx from "clsx";
import { cubicBezier, m } from "framer-motion";

import CallToAction from "@/components/call-to-action";
import QuizSection from "@/components/quiz-section";
import ErrorLabel from "@/components/quiz-section/error-label";
import { getCopy } from "@/config/copy";
import { useStore } from "@/store";
import type { QuizSectionItem } from "@/types";

import QuizCallToAction from "./quiz-call-to-action";

import styles from "./styles.module.scss";

const Quiz = ({ sections }: { sections: Array<QuizSectionItem> }) => {
  const step = useStore.use.step();
  const setStep = useStore.use.setStep();
  const maxStep = useStore.use.maxStep();
  const setMaxStep = useStore.use.setMaxStep();
  const threeInstance = useStore.use.three();

  const errorWarning = useStore.use.errorWarning();
  const setErrorWarning = useStore.use.setErrorWarning();
  const showErrorWarning = useStore.use.showErrorWarning();
  const setShowErrorWarning = useStore.use.setShowErrorWarning();

  const androidKeyboardOverlap = useStore.use.androidKeyboardOverlap();

  const [buttonState, setButtonState] = useState<boolean>(true);

  const { user } = useUser();
  const isReturningUser = useStore.use.isReturningUser();

  const [buttonLabel, setButtonLabel] = useState<string | undefined>("");

  const ctaAction = () => {
    /*const action = sections[step]?.button
      ? sections[step]?.button?.action
      : null;*/

    if (buttonState) {
      setStep(step + 1);
      setButtonState(false);
      setShowErrorWarning(false);
    } else {
      setShowErrorWarning(false);
      setTimeout(setShowErrorWarning, 300, [true]);
      threeInstance?.showError();
    }
  };

  useEffect(() => {
    setButtonLabel(sections[step]?.button ? sections[step]?.button?.label : "");

    if (step === 0) {
      setButtonState(true);
      setShowErrorWarning(false);
    }

    if (step >= maxStep) {
      setMaxStep(step);
    }
  }, [step, maxStep, setMaxStep, setButtonState]);

  useEffect(() => {
    if (buttonState) {
      setShowErrorWarning(false);
    }
  }, [buttonState, setShowErrorWarning]);

  const needsLogin = step === 0 && !user && isReturningUser;

  return (
    <div className={styles.quiz}>
      {sections && sections.length > 0 ? (
        <m.ul id="quiz-sections">
          {sections.map((section: QuizSectionItem, index: number) => (
            <m.li
              key={index}
              id={section.id}
              className={styles.quizStep}
              initial={{ opacity: 0, x: `${(index - step) * 100}vw` }}
              animate={{ opacity: 1, x: `${(index - step) * 100}vw` }}
              transition={{ duration: 1.0, ease: cubicBezier(0.16, 1, 0.5, 1) }}
            >
              <QuizSection
                content={{
                  ...section,
                  setButtonState: setButtonState,
                  clickButton: ctaAction,
                }}
              />
            </m.li>
          ))}
        </m.ul>
      ) : null}

      <div className={styles.errorBlock}>
        <ErrorLabel
          text={errorWarning.message}
          visible={showErrorWarning}
          input={errorWarning.input}
        />
      </div>

      <div className={styles.nav}>
        {buttonLabel && !needsLogin && !androidKeyboardOverlap && (
          <QuizCallToAction
            disabled={!buttonState}
            label={buttonLabel}
            onClick={ctaAction}
          ></QuizCallToAction>
        )}
        {needsLogin && (
          <SignInButton mode={"modal"} redirectUrl={window.location.origin}>
            <CallToAction variant="buttonPill" tabIndex={0}>
              {getCopy("landing:CTA-signin")}
            </CallToAction>
          </SignInButton>
        )}
      </div>
    </div>
  );
};

export default Quiz;