import { onBeforeUnmount, onBeforeMount } from 'vue';
import { useModal } from './use-modal';
import { useEventBus } from '@/composables/use-event-bus';
import { useIds } from './use-ids';

export const useInputModal = (args?: {
  onSubmit?: (val: string) => void | Promise<void>;
  onCancel?: () => void | Promise<void>;
}) => {
  const { getId } = useIds();
  const id = getId('input-modal');
  const submitEvent = id + '-submit';
  const cancelEvent = id + '-cancel';

  const bus = useEventBus();
  const modal = useModal();

  const onSubmit = async (e: any) => {
    if (!!args?.onSubmit && typeof args.onSubmit === 'function') {
      const p = args.onSubmit(e);
      if (!!p?.then) {
        await p;
      }
    }
  };

  const onCancel = async () => {
    if (!!args?.onCancel && typeof args.onCancel === 'function') {
      const p = args.onCancel();
      if (!!p?.then) {
        await p;
      }
    }
  };

  onBeforeMount(() => {
    bus.on(submitEvent, onSubmit);
    bus.on(cancelEvent, onCancel);
  });

  onBeforeUnmount(() => {
    bus.off(submitEvent, onSubmit);
    bus.off(cancelEvent, onCancel);
  });

  return { ...modal, id, submitEvent, cancelEvent };
};