import { tippy, hideOnEsc } from "@libs/tippy";

export default function withDropdown(props = {}) {
  function withDropdownMixin(component) {
    const tippyEl = component.$refs.dropdownTrigger || component.$root;

    const dropdown = tippy(tippyEl, {
      trigger: "click",
      interactive: true,
      animation: false,
      content: component.$refs.dropdownPanel,
      plugins: [hideOnEsc],

      onMount() {
        if (component.onDropdownMount) {
          component.onDropdownMount();
        }
      },

      onCreate() {
        if (component.onDropdownCreate) {
          component.onDropdownCreate();
        }
      },

      onShow: () => {
        component.dropdown.open = true;
        if (component.onDropdownShow) {
          return component.onDropdownShow();
        }

        if (component.setState) {
          component.setState("active");
        }
      },

      onHide: () => {
        component.dropdown.open = false;
        if (component.onDropdownHide) {
          component.onDropdownHide();
        }
        if (component.resetState) {
          component.resetState();
        }
      },

      ...props,
    });

    return Object.assign(component, {
      dropdown: Alpine.reactive({
        instance: dropdown,
        open: false,

        hide() {
          this.instance.hide();
        },

        show() {
          this.instance.show();
        },
      }),
    });
  }

  withDropdownMixin.props = ["dropdown"];

  return withDropdownMixin;
}