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

interface IUseUnleashProps {
    flag: string;
}

export const useUnleash = ({
    flag
}: IUseUnleashProps) => {
    const { flagsReady } = useFlagsStatus();
    const unleashClient = useUnleashClient();
    const abVariant = useVariant(flag);
    // const isEnabled = useFlag(flag);

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

    const variant = useMemo(() => {
        return abVariant?.payload?.value;
    }, [abVariant]);

    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
    ])
};