const growthbook = new GrowthBook({
    apiHost: "<https://cdn.growthbook.io>",
    clientKey: "REDACTED",
    enableDevMode: true,
    trackingCallback: (experiment, result) => {
        // TODO: Use your real analytics tracking system
        console.log("Viewed Experiment", {
            experimentId: experiment.key,
            variationId: result.key
        });
    }
});

useEffect(()=>{
    growthbook.loadFeatures({autoRefresh: true});
},[])

import {useEffect, useRef, useState} from "react";

const useGb = (props = {}) => {

    const {feature, fallbackValue, fallbackTimer = 200} = props;

    const [ready,setReady] = useState(false);
    const [featureDetail, setFeatureDetail] = useState(undefined);

    const gbRef = useRef();
    const timerRef = useRef();
    const fallbackRef = useRef();

    useEffect(()=>{
        if(timerRef.current) {return}
        timerRef.current = setInterval(()=>{
            if(window._growthbook && window._growthbook?.ready) {
                gbRef.current = window._growthbook;
                setReady(true);
                setFeatureDetail(gbRef.current.feature(feature));
                clearInterval(timerRef.current)
            }
        },1000)

        if(!!feature && !!fallbackValue) {
            fallbackRef.current = setTimeout(() => {
                var cur = undefined;
                setFeatureDetail(val => {
                    if (!!val) {
                        return val;
                    } else {
                        return {value: fallbackValue, isFallback: true}
                    }
                })
            }, [fallbackTimer])
        }

        return () => {
            if(timerRef.current) {
                clearInterval(timerRef.current)
            }
            if(fallbackRef) {
                clearTimeout(fallbackRef);
            }
        }

    },[])

    return {
        growthbook: gbRef.current,
        ready: ready,
        value: featureDetail?.value,
        detail: featureDetail
    }

}

export default useGb;