import { cloneDeep } from "oak-domain/lib/utils/lodash";
import { generateNewIdAsync } from "oak-domain/lib/utils/uuid";
import { DATA_SUBSCRIBER_KEYS } from "../../../config/constants";
export default OakComponent({
    isList: false,
    properties: {
        entity: '',
        entityId: '',
        title: '',
        origin: null, // cos origin默认由系统决定
        menuEmpty: undefined,
        articleEmpty: undefined,
        generateUrl: ((mode, type, id) => { }), //构造文章显示路由
    },
    formData({ data }) {
        return {};
    },
    data: {
        breadcrumbItems: [],
        showAddArticle: false,
        showAddMenu: true,
        parentId: '',
        articleMenuId: '', //非空时展示atricle表格
        unsub: undefined,
    },
    listeners: {
        title(prev, next) {
            if (prev.title !== next.title && next.title) {
                this.setState({
                    breadcrumbItems: [{
                            id: 'default',
                            title: next.title ?? this.t('doc'),
                        }]
                });
            }
        },
        // async entityId(prev, next) {
        //     if (prev.entityId !== next.entityId) {
        //         if (prev.entityId) {
        //             const { unsub } = this.state;
        //             unsub && unsub();
        //         }
        //         if (next.entityId) {
        //             const unsub = await this.subDataEvents([`${DATA_SUBSCRIBER_KEYS.articleCreate}-${next.entityId}`],
        //                 async (event: string, opRecords: OpRecord<ED>[]) => {
        //                     for (const record of opRecords) {
        //                         if (record.a === 's') {
        //                             const { articleMenu } = record.d;
        //                             if (articleMenu) {
        //                                 this.menuCheck();
        //                             }
        //                         }
        //                     }
        //                 }
        //             );
        //             this.setState({
        //                 unsub,
        //             })
        //         }
        //     }
        // }
    },
    lifetimes: {
        async ready() {
            const { title, entityId, } = this.props;
            if (entityId) {
                const unsub = await this.subDataEvents([`${DATA_SUBSCRIBER_KEYS.articleCreate}-${entityId}`, `${DATA_SUBSCRIBER_KEYS.articleMenuUpdate}-${entityId}`], async (event, opRecords) => {
                    for (const record of opRecords) {
                        if (record.a === 's') {
                            const { articleMenu } = record.d;
                            const keys = Object.keys(articleMenu);
                            const menu = articleMenu[keys[0]];
                            if (menu) {
                                const { isArticle } = menu;
                                this.menuCheck(isArticle);
                            }
                        }
                        else if (record.a === 'update' && record.e === 'articleMenu') {
                            const { isArticle } = record.d || {};
                            this.menuCheck(!!isArticle);
                        }
                    }
                });
                this.setState({
                    unsub,
                    breadcrumbItems: [{
                            id: 'default',
                            title: title ?? this.t('doc'),
                        }]
                });
            }
            else {
                this.setState({
                    breadcrumbItems: [{
                            id: 'default',
                            title: title ?? this.t('doc'),
                        }]
                });
            }
        },
        detached() {
            const { unsub } = this.state;
            unsub && unsub();
        },
    },
    methods: {
        onBreadcrumItemClick(id) {
            const { breadcrumbItems } = this.state;
            const idx = breadcrumbItems.findIndex((ele) => ele.id === id);
            const newBreadCrumbItems = cloneDeep(breadcrumbItems).slice(0, idx + 1);
            if (idx === (breadcrumbItems.length - 1)) {
                //点击最后一项无变化
                return;
            }
            else {
                this.setState({
                    breadcrumbItems: newBreadCrumbItems,
                    parentId: id === 'default' ? '' : id,
                    articleMenuId: '',
                    showAddArticle: false,
                    showAddMenu: true,
                });
            }
        },
        onMenuClick(menuId, menuName, isArticle) {
            const { breadcrumbItems } = this.state;
            const newBreadcrumbItems = cloneDeep(breadcrumbItems);
            newBreadcrumbItems.push({
                id: menuId,
                title: menuName,
            });
            const parentId = isArticle ? '' : menuId;
            const articleMenuId = isArticle ? menuId : '';
            this.setState({
                parentId,
                breadcrumbItems: newBreadcrumbItems,
                showAddArticle: isArticle,
                showAddMenu: !isArticle,
                articleMenuId,
            });
        },
        async onAddMenu(menuName) {
            const { entity, entityId } = this.props;
            const { parentId } = this.state;
            const menuId = await generateNewIdAsync();
            const createData = {
                id: menuId,
                name: menuName,
                entity,
                entityId,
                isArticle: false,
                isLeaf: false,
                ...(parentId && parentId !== '' && { parentId })
            };
            try {
                await this.features.cache.operate('articleMenu', {
                    id: await generateNewIdAsync(),
                    action: 'create',
                    data: createData,
                }, {});
                this.setMessage({
                    type: 'success',
                    content: this.t('success.addmenu')
                });
                this.onMenuClick(menuId, menuName, false);
                return true;
            }
            catch (err) {
                this.setMessage({
                    type: 'error',
                    content: this.t('fail') + err?.message,
                });
                return false;
            }
        },
        changeAddArticle(show) {
            this.setState({
                showAddArticle: !!show,
            });
        },
        async onAddArticle() {
            const { generateUrl } = this.props;
            const { parentId, articleMenuId } = this.state;
            const id = articleMenuId || parentId;
            const url = generateUrl ? generateUrl('article', 'create', id) : '';
            window.open(url, '_blank');
        },
        menuCheck(isArticle) {
            const menuId = (this.state.articleMenuId && this.state.articleMenuId !== '') ? this.state.articleMenuId : this.state.parentId;
            const parentId = isArticle ? '' : menuId;
            const articleMenuId = isArticle ? menuId : '';
            this.setState({
                parentId,
                showAddArticle: isArticle,
                showAddMenu: !isArticle,
                articleMenuId,
            });
        },
    }
});