import {Tab} from "../layout/Tab";
import {Custom} from "../layout/dock/Custom";
import {bindCardEvent, genCardHTML} from "./openCard";
import {fetchPost} from "../util/fetch";
import {Protyle} from "../protyle";
import {setPanelFocus} from "../layout/util";
import {App} from "../index";
import {clearOBG} from "../layout/dock/util";

export const newCardModel = (options: {
    app: App,
    tab: Tab,
    data: {
        cardType: TCardType,
        id: string,
        title?: string
        cardsData?: ICardData,
        index?: number,
    }
}) => {
    let editor: Protyle;
    const customObj = new Custom({
        app: options.app,
        type: "siyuan-card",
        tab: options.tab,
        data: options.data,
        async init() {
            if (options.data.cardsData) {
                let cardsData = options.data.cardsData;
                for (let i = 0; i < options.app.plugins.length; i++) {
                    cardsData = await options.app.plugins[i].updateCards(options.data.cardsData);
                }
                this.element.innerHTML = genCardHTML({
                    id: this.data.id,
                    cardType: this.data.cardType,
                    cardsData,
                    isTab: true,
                });

                editor = await bindCardEvent({
                    app: options.app,
                    element: this.element,
                    id: this.data.id,
                    title: this.data.title,
                    cardType: this.data.cardType,
                    cardsData,
                    index: options.data.index,
                });
                customObj.editors.push(editor);
                // https://github.com/siyuan-note/siyuan/issues/9561#issuecomment-1794473512
                delete options.data.cardsData;
                delete options.data.index;
            } else {
                fetchPost(this.data.cardType === "all" ? "/api/riff/getRiffDueCards" :
                    (this.data.cardType === "doc" ? "/api/riff/getTreeRiffDueCards" : "/api/riff/getNotebookRiffDueCards"), {
                    rootID: this.data.id,
                    deckID: this.data.id,
                    notebook: this.data.id,
                }, async (response) => {
                    let cardsData = response.data;
                    for (let i = 0; i < options.app.plugins.length; i++) {
                        cardsData = await options.app.plugins[i].updateCards(cardsData);
                    }
                    this.element.innerHTML = genCardHTML({
                        id: this.data.id,
                        cardType: this.data.cardType,
                        cardsData,
                        isTab: true,
                    });

                    editor = await bindCardEvent({
                        app: options.app,
                        element: this.element,
                        id: this.data.id,
                        title: this.data.title,
                        cardType: this.data.cardType,
                        cardsData,
                    });
                    customObj.editors.push(editor);
                });
            }
        },
        destroy() {
            if (editor) {
                editor.destroy();
            }
        },
        resize() {
            if (editor) {
                editor.resize();
            }
        },
        update() {
            fetchPost(this.data.cardType === "all" ? "/api/riff/getRiffDueCards" :
                (this.data.cardType === "doc" ? "/api/riff/getTreeRiffDueCards" : "/api/riff/getNotebookRiffDueCards"), {
                rootID: this.data.id,
                deckID: this.data.id,
                notebook: this.data.id,
            }, async (response) => {
                let cardsData = response.data;
                for (let i = 0; i < options.app.plugins.length; i++) {
                    cardsData = await options.app.plugins[i].updateCards(cardsData);
                }
                customObj.editors.forEach(item => {
                    item.destroy();
                });
                this.element.innerHTML = genCardHTML({
                    id: this.data.id,
                    cardType: this.data.cardType,
                    cardsData,
                    isTab: true,
                });
                editor = await bindCardEvent({
                    app: options.app,
                    element: this.element,
                    id: this.data.id,
                    title: this.data.title,
                    cardType: this.data.cardType,
                    cardsData,
                });
                customObj.editors.push(editor);
            });
        }
    });
    customObj.element.addEventListener("click", () => {
        clearOBG();
        setPanelFocus(customObj.element.parentElement.parentElement);
    });
    return customObj;
};