import { Controller } from "@hotwired/stimulus";
import { BucketClient } from "@bucketco/browser-sdk";

const bucket = new BucketClient({
  ...window.BUCKET_OPTS,
  host: "https://front-eu.bucket.co",
});

const prom = bucket.initialize();

export default class extends Controller {
  static values = {
    feature: String,
    enabled: { type: Boolean, default: false },
    hideIfDisabled: { type: Boolean, default: true },
  };

  async connect() {
    this.initialDisplay = getComputedStyle(this.element).display
    this.toggleVisibility()

    await prom;

    this.update();

    addEventListener("turbo:load", this.update);
  }

  disconnect() {
    removeEventListener("turbo:load", this.update);
  }

  update = () => {
    this.enabledValue = bucket.getFeature(this.featureValue).isEnabled;
  };

  enabledValueChanged = () => {
    // Skip initial toggle so we can get initial display value before hiding
    if (!this.initialDisplay) return;

    if (this.hideIfDisabledValue) {
      this.toggleVisibility();
    }
  };

  toggleVisibility = () => {
    if (!this.hideIfDisabledValue) return;

    if (this.enabledValue) {
      this.element.style.display = this.initialDisplay
    } else {
      this.element.style.display = "none"
    }
  };

  async track() {
    await prom;
    bucket.track(this.featureValue);
  }
}