import { defineComponent, nextTick, onMounted, ref, getCurrentInstance, isVue3, h, isVue2 } from 'vue-demi';
import { hh } from './DemiHelper';
import { InvokerContext } from '../types/InvokerContext';

export default defineComponent({
    name: 'Receiver',
    props: {
        parentId: {
            type: [Number, String],
            default: () => 0
        },
        parentKey: {
            type: String,
            default: () => 'MES_MOD_INVOKERS'
        }
    },
    setup(props) {
        const instance = getCurrentInstance();
        let invokerContext: InvokerContext = null!;
        const renderVersion = ref(0);
        console.log(`[Mod-Receiver] receiver setup, invokerId: ${props.parentId}, invokerKey: ${props.parentKey}`);
        if (window.parent != window) {
            const invoker = window.parent[props.parentKey][props.parentId];
            invokerContext = invoker;
        }
        else {
            throw new Error("[Receiver] 组件必须在iframe中使用");
        }

        const renderItems = ref(invokerContext.getRenderContext() ?? []);

        onMounted(() => {
            nextTick().then(() => {
                console.log('mounted-finish');
                if (!invokerContext['modContext']) {
                    invokerContext.initFinish({
                        get renderVersion() {
                            return renderVersion.value;
                        },
                        Update: function (): void {
                            console.log('[Mod-Receiver] force update', renderVersion.value);
                            renderVersion.value += 1;
                            renderItems.value = invokerContext.getRenderContext() ?? [];
                            instance?.proxy?.$forceUpdate();
                        },
                        // @ts-ignore
                        get refs() {
                            return instance?.proxy?.$refs;
                        }
                    });
                }
            });
        });
        return (createElem) => {
            const render = isVue2 ? createElem : h;
            try {
                if (renderVersion.value < 0) return;
                if (invokerContext.getRenderContext) {
                    const itemList = invokerContext.getRenderContext() ?? [];

                    // const list = renderContext(itemList);
                    console.log("[Mod-Receiver] rendering: ", itemList);
                    // @ts-ignore
                    return hh('div', undefined, itemList, render);
                }
                console.log("[Mod-Receiver] 'getRenderContext' method not found");
                return hh('div', undefined, undefined, render);
            }
            catch (e) {
                console.error("[Mod-Receiver] 渲染节点过程中出现错误", e);
            }
        };
    }
});