guillotine

import * as menu from "@zag-js/menu";
import { normalizeProps } from "./normalize-props";
import { spreadProps } from "./spread-props";

export function createMenuHook() {
  return {
    mounted() {
      this.context = this.context || {};
      this.context.id = this.el.id;

      this.service = menu.machine(this.context);
      this.api = menu.connect(
        this.service.state,
        this.service.send,
        normalizeProps,
      );

      this.init();
    },

    beforeDestroy() {
      this.service.stop();
    },

    init() {
      const service = this.service;

      this.render();
      service.subscribe(() => {
        this.api = menu.connect(
          service.state,
          service.send,
          normalizeProps,
        );
        this.render();
      });

      service.start();
    },

    items() {
      return Array.from(this.el.querySelectorAll("[data-part='item']"));
    },

    render() {
      const trigger = this.el.querySelector("[data-part='trigger']");
      const positioner = this.el.querySelector("[data-part='positioner']");
      const content = this.el.querySelector("[data-part='content']");

      if (trigger) spreadProps(trigger, this.api.triggerProps);
      if (positioner) spreadProps(positioner, this.api.positionerProps);
      if (content) spreadProps(content, this.api.contentProps);

      this.items().forEach((item) => {
        this.renderItem(item);
      });
    },

    renderItem(item) {
      spreadProps(item, this.api.getItemProps({ value: item.id }));
    },
  };
}