const { ipcRenderer } = require('electron');
const RendererEvent = require('../../lib/eazax/renderer-event');
const { getUrlParam } = require('../../lib/eazax/browser-util');
const { translate } = require('../../lib/eazax/i18n');
const { ICON_MAP } = require('../../icon-map');

// 导入 Vue 工具函数
const { ref, watch, onMounted, onBeforeUnmount, createApp } = Vue;

/** 当前语言 */
const LANG = getUrlParam('lang');


// 定义 ref-item 组件
const RefItem = {
    template: '#ref-item-template',
    props: ['item'],
    emits: ['item-click'],
    setup(props) {
        const isExpanded = ref(true);

        const toggleExpand = () => {
            isExpanded.value = !isExpanded.value;
        };

        return {
            isExpanded,
            toggleExpand
        };
    }
};

// 构建 Vue 应用
const App = {

    // 需要自定义组件
    components: {
        RefItem
    },

    /**
     * 设置
     * @param {*} props
     * @param {*} context
     */
    setup(props, context) {
        // 数据
        const results = ref([]);
        const selectedItem = ref(null);

        /**
         * 项点击事件处理函数
         * @param {IRef} item 点击的项
         */
        function onItemClick(item) {
            let isDoubleClick = false;
            if (item === selectedItem.value) {
                isDoubleClick = true;
            }

            // 点击不同的才切换状态
            if (!isDoubleClick) {
                if (selectedItem.value) {
                    selectedItem.value.selected = false;
                }
                item.selected = true;
                selectedItem.value = item;
            }

            // 不同类型处理不同
            if (item.type === 'scene' || item.type === 'prefab' || item.type === 'node') {
                let url = item.url;
                if (item.prefabUrl && item.type === 'node') {
                    url = item.prefabUrl;
                }
                if (isDoubleClick) {
                    // prefab 如果是双击，则发送消息到 Cocos Creator 打开
                    // ipcRenderer.send('open-prefab', item.uuid);
                    // ipcRenderer.send('asset-db', 'open-asset', item.url);
                    // ipcRenderer.send('open-asset', item.url);
                    RendererEvent.send('open-asset', url, item.node);
                } else {
                    // 否则发送消息到 Cocos Creator 选中
                    // ipcRenderer.send('select-node', item.uuid);
                    RendererEvent.send('select-asset', url);
                }
            } else {
                RendererEvent.send('select-asset', item.url);
            }
        }

        /**
         * 翻译
         * @param {string} key
         */
        function t(key) {
            return translate(LANG, key);
        }

        /**
         * 生命周期：挂载后
         */
        onMounted(() => {
            // 监听 IPC 消息
            ipcRenderer.on('results-data', (event, data) => {

                // 初始化数据
                function initData(ref) {

                    // 图标
                    ref.icon = ICON_MAP[ref.type];
                    if (!ref.icon) {
                        ref.icon = '';
                    }
                    // 详情
                    ref.details = '';
                    if (ref.type === 'node') {
                        if (ref.component) {
                            ref.details += ` 　→ 　${ICON_MAP['component']} [${t('component')}] ${ref.component}`;
                        }
                        if (ref.property) {
                            ref.details += ` 　→ 　${ICON_MAP['property']} [${t('property')}] ${ref.property}`;
                        }
                    }
                    // 递归
                    if (ref.refs) {
                        ref.refs.forEach(child => {
                            initData(child);
                            // 赋值为父节点的url
                            child.prefabUrl = ref.url;
                        });
                    }
                }
                initData(data);

                // 更新 results 的值
                results.value = data.refs;
                //
                selectedItem.value = null;
            });
        });

        /**
         * 生命周期：卸载前
         */
        onBeforeUnmount(() => {
            // 移除 IPC 监听器
            ipcRenderer.removeAllListeners('results-data');
        });

        return {
            t,
            //
            results,
            onItemClick,
            selectedItem,
        };

    },

};

// 创建实例
const app = createApp(App);
// 挂载组件
app.component('ref-item', RefItem);
// 挂载
app.mount('#app');