import { CocoComponent } from "@assets/js/coco/component";
import { getData } from "@helpers/alpine";

export default CocoComponent("layoutPickerButton", ({ selected }) => {
  return {
    selectedLayout: selected,

    getPicker() {
      return getData(
        this.$root.querySelector("[data-role='layout-picker']")
          .firstElementChild
      );
    },

    getButton() {
      return getData(this.$root.querySelector(".layout-picker-trigger"));
    },

    init() {
      this.$watch("selectedLayout", () => this.getButton().hideDropdown());
    },
  };
});