import React, { useState } from "react";
import { OnboardingSurvey } from "./onboardingSurvey";
import { defaultOnboardingConfig } from "./defaultOnboardingConfig";
import { getOnboardingConfig, submitSurvey, updatePersona, } from "../../api/help-center";
import { useC3UserConfiguration, } from "../c3-user-configuration/c3-user-configuration-provider";
export const C3OnboardingSurvey = (props) => {
    const { userToken, decodedToken, activeOrganizationId, decodedAudience } = useC3UserConfiguration();
    const [persona, setPersona] = useState(props.persona);
    const [userId, setUserId] = useState("");
    const [onboardConfig, setOnboardConfig] = useState(defaultOnboardingConfig);
    const [isLoadingConfig, setIsLoadingConfig] = useState(false);
    const [givenName, setGivenName] = useState("");
    const [email, setEmail] = useState("");
    React.useEffect(() => {
        if (!decodedToken || !decodedAudience)
            return;
        (async () => {
            const { userId, meta, persona } = decodedToken;
            if (props.persona === undefined && persona) {
                setPersona(persona);
            }
            if (meta) {
                setGivenName(meta.given_name);
                setEmail(meta.email);
            }
            if (userId)
                setUserId(userId);
            setOnboardConfig(defaultOnboardingConfig);
            setIsLoadingConfig(true);
            const { result: config } = await getOnboardingConfig({
                audience: decodedAudience,
                camundaAuth: { token: userToken },
                orgId: activeOrganizationId,
            });
            if (config)
                setOnboardConfig(config);
            setIsLoadingConfig(false);
        })();
    }, [JSON.stringify(decodedToken), decodedAudience]);
    React.useEffect(() => {
        setPersona(props.persona);
    }, [props.persona]);
    const closeFn = async (skip) => {
        props.mixpanelTrack?.("survey:click", {
            location: skip ? "skip" : "exit",
            step: persona?.nextStep ?? 1,
            from: props.origin,
        });
        const newPersona = { ...persona, ...{ complete: skip } };
        if (activeOrganizationId && userToken && decodedAudience)
            await updatePersona({
                newPersona,
                audience: decodedAudience,
                orgId: activeOrganizationId,
                userId,
                accessToken: userToken,
            });
        props.personaCallback(newPersona);
        setPersona(newPersona);
        if (skip) {
            props.onRequestSkip();
        }
        else {
            props.onRequestClose();
        }
    };
    const syncPersona = async (newPersona, notifyHubspot) => {
        if (activeOrganizationId && userToken && decodedAudience) {
            await updatePersona({
                newPersona,
                audience: decodedAudience,
                orgId: activeOrganizationId,
                userId,
                accessToken: userToken,
            });
            if (notifyHubspot) {
                await submitSurvey({
                    audience: decodedAudience,
                    token: userToken,
                    data: { ...newPersona, ...{ email, orgUuid: activeOrganizationId } },
                });
            }
        }
        setPersona(newPersona);
        props.personaCallback(newPersona);
    };
    return (React.createElement(OnboardingSurvey, { appTheme: props.theme, userFirstName: givenName, persona: persona, syncPersona: syncPersona, setPersona: setPersona, mixpanelTrack: props.mixpanelTrack, onRequestClose: closeFn, onboardingConfiguration: onboardConfig, isLoadingConfig: isLoadingConfig, modal: props.modal, origin: props.origin }));
};
