import { api, LightningElement } from "lwc";
import optimizelySdk from "@optimizely/optimizely-sdk";

// This is needed to specify user context (such as logged in, admin, ...etc).
// leave this as hard-coded for now until we create audiences in Optimizely.
const userId = "user123";

export default class FeatureFlag extends LightningElement {
    @api flag!: string;

    private optimizelyInstance: any;

    private showElements(slot: any) {
        slot.classList.remove("hidden");
    }

    connectedCallback(): void {
        this.optimizelyInstance = optimizelySdk.createInstance({
            sdkKey: process.env.OPTIMIZELY_SDK_KEY
        });
    }

    renderedCallback(): void {
        const slotEl = this.template.querySelector("slot") as any;

        this.optimizelyInstance?.onReady().then(({ success, reason }: any) => {
            if (!success) {
                console.log(
                    `Optimizely client initialization unsuccessful, reason: ${reason}`
                );
                return;
            }
            const user = this.optimizelyInstance?.createUserContext(userId);
            const decision = user?.decide(this.flag);

            if (decision?.enabled) {
                this.showElements(slotEl);
            }
        });
    }
}