import { useFlagsStatus, useUnleashClient, useVariant } from "@unleash/proxy-client-react";
import { useEffect, useMemo } from "react";
import { useSearchParams } from "react-router-dom";

export enum EUnleashFlags {
    "genderPageType" = "genderPageType",
    "zodiacImages" = "zodiacImages",
    "dynamicHandsCompV2" = "dynamicHandsCompV2",
    "dynamicHandsPalmistryV1" = "dynamicHandsPalmistryV1",
    "welcomePageImagePalmistryV1" = "welcomePageImagePalmistryV1",
    "cameraRequestModalPalmistryV1" = "cameraRequestModalPalmistryV1",
    "cameraRequestModalCompatibilityV2" = "cameraRequestModalCompatibilityV2",
    "darkThemePalmistryV1" = "darkThemePalmistryV1",
    "paymentButtonLogic" = "paymentButtonLogic",
    "pageAfterTrialPaymentCompatibilityV2" = "pageAfterTrialPaymentCompatibilityV2",
    "pageAfterTrialPaymentCompatibilityV3" = "pageAfterTrialPaymentCompatibilityV3",
    "pageAfterTrialPaymentPalmistryV1" = "pageAfterTrialPaymentPalmistryV1",
    "paymentModalPage" = "paymentModalPage",
}

interface IUseUnleashProps<T extends EUnleashFlags> {
    flag: T;
}

interface IVariants {
    [EUnleashFlags.genderPageType]: "v0" | "v1" | "v2";
    [EUnleashFlags.zodiacImages]: "new" | "old";
    [EUnleashFlags.dynamicHandsCompV2]: "show" | "hide";
    [EUnleashFlags.dynamicHandsPalmistryV1]: "show" | "hide";
    [EUnleashFlags.welcomePageImagePalmistryV1]: "v0" | "v1";
    [EUnleashFlags.cameraRequestModalPalmistryV1]: "show" | "hide";
    [EUnleashFlags.cameraRequestModalCompatibilityV2]: "show" | "hide";
    [EUnleashFlags.darkThemePalmistryV1]: "enabled" | "disabled";
    [EUnleashFlags.paymentButtonLogic]: "old" | "new";
    [EUnleashFlags.pageAfterTrialPaymentCompatibilityV2]: "paymentInformation" | "paymentForm";
    [EUnleashFlags.pageAfterTrialPaymentCompatibilityV3]: "paymentInformation" | "paymentForm";
    [EUnleashFlags.pageAfterTrialPaymentPalmistryV1]: "paymentInformation" | "paymentForm";
    [EUnleashFlags.paymentModalPage]: "v0" | "v1" | "v2";
}

/**
 * Хук для получения значения A/B теста по флагу
 * @template T - Тип флага из EUnleashFlags
 * @returns Объект с информацией о готовности флага и его значении, типизированным в зависимости от переданного флага
 */
export const useUnleash = <T extends EUnleashFlags>({
    flag
}: IUseUnleashProps<T>) => {
    const { flagsReady } = useFlagsStatus();
    const unleashClient = useUnleashClient();
    const abVariant = useVariant(flag);
    // const isEnabled = useFlag(flag);
    const [searchParams] = useSearchParams();
    const variantFromParams = searchParams.get(flag);

    const isReady = useMemo(() => {
        return flagsReady ?? true;
    }, [flagsReady]);

    const variant = useMemo(() => {
        return variantFromParams || abVariant?.payload?.value;
    }, [abVariant, variantFromParams]) as IVariants[T];

    useEffect(() => {
        unleashClient.on("impression", (impressionEvent: any) => {
            if ("enabled" in impressionEvent && impressionEvent.enabled) {
                window.gtag?.("event", "experiment_impression", {
                    app_name: impressionEvent.context.appName,
                    feature: impressionEvent.featureName,
                    treatment: impressionEvent.variant, // in case we use a variant for the control treatment
                });
            }
        });

        return () => {
            unleashClient.off("impression");
        }
    }, [unleashClient]);

    return useMemo(() => ({
        isReady,
        variant
    }), [
        isReady,
        variant
    ]) as { isReady: boolean; variant: IVariants[T] };
};