import { onMounted, onUnmounted, ref, Ref } from 'vue';

/**
 * хук работы с iframe
 *
 * defaultMessageList - объект доступных событий, пример:
 *      {
 *        [EVENT_PAYMENT_FORM.payment_success]: () => {},
 *        [EVENT_PAYMENT_FORM.payment_fail]: async () => {}
 *      }
 * iframeLoadingHandler - обработчик загрузки iframe, срабатывает когда iframe испускает событие "load"
 * formPostMessageListener - обработчик пост-месседжей, проходит по всему объекту доступных событий и вызывает событие которое передал iframe
 */

export default function (
    defaultMessageList: any,
    mountedCb?: typeof onMounted,
    unMountedCb?: typeof onUnmounted,
) {
    const iframe: Ref<HTMLIFrameElement | null> = ref(null);
    const isLoadingIframe = ref(true);

    const formPostMessageListener = (event: any) => {
        const handlerMap = Object.assign(defaultMessageList || {});
        for (const eventName in handlerMap) {
            if (
                (event.data.name === eventName && handlerMap[eventName]) ||
                (event.data === eventName && handlerMap[eventName])
            ) {
                handlerMap[eventName](event, iframe.value);
                break;
            }
        }
    };

    const iframeLoadingHandler = () => {
        isLoadingIframe.value = false;
    };

    if (mountedCb) {
        mountedCb(async () => {
            isLoadingIframe.value = true;
            if (iframe.value) {
                iframe.value?.addEventListener('load', iframeLoadingHandler);
            }
            window.addEventListener('message', formPostMessageListener);
        });
    }

    if (unMountedCb) {
        unMountedCb(() => {
            if (iframe.value) {
                iframe.value?.removeEventListener('load', iframeLoadingHandler);
                iframe.value = null;
            }
            window.removeEventListener('message', formPostMessageListener);
        });
    }

    return {
        iframe,
        isLoadingIframe,
    };
}
