import { useProgramId, useTick, useHost, } from "@saasquatch/component-boilerplate";
import { useRef, useEffect } from "@saasquatch/universal-hooks";
import debugFn from "debug";
const debug = debugFn("sq:useProgramMenu");
const UPDATE_PROGRAM_EVENT = "sq:update-program-id";
export function useProgramMenu(props) {
  const programId = useProgramId();
  const host = useHost();
  debug({ programId, props });
  const ref = useRef();
  const [, rerender] = useTick();
  useEffect(() => {
    var _a;
    (_a = ref.current) === null || _a === void 0 ? void 0 : _a.addEventListener("sl-select", (e) => {
      const programId = e.detail.item.value;
      // setProgramId(programId);
      host.dispatchEvent(new CustomEvent(UPDATE_PROGRAM_EVENT, {
        detail: programId,
        bubbles: true,
        composed: true,
      }));
    });
  }, [ref.current]);
  return {
    data: {
      programId,
    },
    callbacks: {
      rerender,
    },
    ref,
  };
}
