const activeModals = ref([]);

export default function useModal() {
  function open(component, options = {}) {
    const id = Date.now() + Math.random();
    const modal = {
      id,
      component,
      title: options.title,
      width: options.width,
      height: options.height,
      vbind: options.props || {},
      onClose: options.onClose,
      onEvent: options.onEvent,
      ...options,
    };
    activeModals.value.push(modal);
    return id;
  }

  function close(id) {
    const index = activeModals.value.findIndex((m) => m.id === id);
    if (index !== -1) {
      const modal = activeModals.value[index];
      modal.onClose?.();
      activeModals.value.splice(index, 1);
    }
  }

  function send(id, eventName, data) {
    const modal = activeModals.value.find((m) => m.id === id);
    modal?.onEvent?.({ name: eventName, data });
  }
  return { modals: activeModals, open, close, send };
}