import { Loading, ProgressIndicator, ProgressStep, Stack } from "@carbon/react";
import React, { useState } from "react";
import { OnboardingModal } from "./onboardingModal";
import { OnboardingPage } from "./onboardingPage";
import { OnboardingStep } from "./step";
import { Body01 } from "../styles";
import { HelpCenterHintType, useC3HelpCenter, } from "../c3-help-center/c3-help-center-provider";
export const OnboardingSurvey = ({ appTheme, persona, userFirstName, syncPersona, setPersona, mixpanelTrack, onRequestClose, onboardingConfiguration, isLoadingConfig, modal, origin, }) => {
    const { setHintType } = useC3HelpCenter();
    const [step, setStep] = useState(persona?.nextStep ?? 0);
    const [isDoingAsyncWork, setIsDoingAsyncWork] = useState(false);
    React.useEffect(() => {
        setStep(persona?.nextStep ?? 0);
    }, [persona]);
    const stepForward = async () => {
        setIsDoingAsyncWork(true);
        const committedStep = step + 1;
        const newPersona = {
            ...persona,
            ...{
                wasShown: true,
            },
        };
        if (committedStep >= onboardingConfiguration.steps.length) {
            setHintType(HelpCenterHintType.HelpCenter);
            newPersona.nextStep = 0;
            newPersona.complete = true;
            await syncPersona(newPersona, true);
        }
        else {
            newPersona.nextStep = step + 1;
            newPersona.complete = false;
            await syncPersona(newPersona, false);
        }
        mixpanelTrack?.("survey:click", {
            location: "next",
            step: committedStep,
            from: origin,
        });
        setIsDoingAsyncWork(false);
    };
    const tryStepTo = (step) => {
        if (nextEnabled(step - 1)) {
            setStep(step);
        }
    };
    const secondaryButtonAction = async () => {
        setIsDoingAsyncWork(true);
        if (step === 0) {
            await onRequestClose(true);
        }
        else {
            const committedStep = step - 1;
            setStep(step - 1);
            const newPersona = {
                ...persona,
                ...{
                    nextStep: committedStep,
                },
            };
            await syncPersona(newPersona, false);
            mixpanelTrack?.("syrvey:click", {
                location: "previous",
                step: committedStep,
                from: origin,
            });
        }
        setIsDoingAsyncWork(false);
    };
    const nextEnabled = (step) => {
        if (step < 0) {
            return true;
        }
        if (onboardingConfiguration.steps.length <= step) {
            return false;
        }
        const requirements = onboardingConfiguration.steps[step]?.nextenabled?.map((field) => field.personaattribute);
        if (!requirements) {
            return true;
        }
        else {
            return requirements.reduce((prev, key) => {
                return (prev &&
                    !!persona?.[key] &&
                    (!(typeof persona[key] === "object" || typeof persona[key] === "string") ||
                        (typeof persona[key] === "string" &&
                            !!persona[key].trim()) ||
                        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
                        // @ts-ignore
                        (typeof persona[key] === "object" && persona[key].length !== 0)));
            }, true);
        }
    };
    const generic = (gen) => {
        if (persona && persona[gen]) {
            return persona[gen];
        }
        else {
            return undefined;
        }
    };
    const setGeneric = async (gen, value) => {
        const pers = { ...persona };
        pers[gen] = value;
        setPersona(pers);
    };
    let theme;
    if (appTheme === "system") {
        if (window.matchMedia("(prefers-color-scheme: light)").matches) {
            theme = "light";
        }
        else {
            theme = "dark";
        }
    }
    else if (appTheme === "light") {
        theme = "light";
    }
    else {
        theme = "dark";
    }
    const content = (React.createElement(React.Fragment, null,
        React.createElement(Body01, null, isLoadingConfig
            ? ""
            : onboardingConfiguration?.header?.description ||
                "Get personalized next steps and educational content by answering this 1-minute survey."),
        React.createElement(Stack, { gap: 8 },
            React.createElement(ProgressIndicator, { currentIndex: step, spaceEqually: true, onChange: tryStepTo }, isLoadingConfig ? (React.createElement(Loading, null)) : (onboardingConfiguration.steps.map((currentStep, index) => (React.createElement(ProgressStep, { label: `Step ${index + 1}`, secondaryLabel: currentStep.title, key: `onboarding-step-${index}`, disabled: step !== index }))))),
            React.createElement(OnboardingStep, { theme: theme, generic: generic, setGeneric: setGeneric, config: onboardingConfiguration.steps[step] }))));
    if (modal) {
        return (React.createElement(OnboardingModal, { isDoingAsyncWork: isDoingAsyncWork, heading: isLoadingConfig
                ? ""
                : onboardingConfiguration.header?.title ||
                    `Welcome to Camunda, ${userFirstName}!`, headingLabel: "", primaryButtonText: "Next", primaryButtonDisabled: !nextEnabled(step), secondaryButtonText: step === 0 ? undefined : "Previous", tertiaryButtonText: step === 0 ? "Skip customization" : undefined, loadingText: "Loading", theme: theme, onPrimary: stepForward, onRequestClose: onRequestClose, onSecondary: secondaryButtonAction, onTertiary: step === 0 ? secondaryButtonAction : undefined }, content));
    }
    else {
        return (React.createElement(React.Fragment, null,
            React.createElement(OnboardingPage, { isDoingAsyncWork: isDoingAsyncWork, heading: isLoadingConfig
                    ? ""
                    : onboardingConfiguration?.header?.title ||
                        `Welcome to Camunda, ${userFirstName}!`, headingLabel: "", primaryButtonText: "Next", primaryButtonDisabled: !nextEnabled(step), secondaryButtonText: step === 0 ? undefined : "Previous", tertiaryButtonText: step === 0 ? "Skip customization" : undefined, loadingText: "Loading", onPrimary: stepForward, onSecondary: secondaryButtonAction, onTertiary: step === 0 ? secondaryButtonAction : undefined }, content)));
    }
};
