import { CocoComponent } from "@assets/js/shared/coco.js";
import { getComponent } from "@helpers/alpine";

export default CocoComponent("buttonDropdown", () => {
  return {
    dropdown: null,
    button: null,

    init() {
      this.$nextTick(() => {
        this.button = getComponent(this.$el.querySelector(".coco-button"));
      });
    },

    hideDropdown() {
      if (this.dropdown) {
        this.dropdown.hide();
      }
    },

    showDropdown() {
      if (this.dropdown) {
        this.dropdown.show();
      }
    },

    /* bindings */

    root: {
      "@dropdown:show": "button.setState('active')",
      "@dropdown:hide": "button.resetState()",
      "@confirmation:confirm": "button.approveAndRun($event)",
      "@confirmation:cancel": "button.cancelConfirmation($event)",
    },
  };
});