import type VaultkeeperAIPlugin from "main";
import { Modal } from "obsidian";
import { Resolve } from "Services/DependencyService";
import { Services } from "Services/Services";
import HelpModalSvelte from './HelpModalSvelte.svelte';
import { mount, unmount } from 'svelte';
import { Selector } from 'Enums/Selector';

export class HelpModal extends Modal {

    private component: ReturnType<typeof mount> | null = null;
    private initialTopic?: number;

    public constructor() {
        const plugin = Resolve<VaultkeeperAIPlugin>(Services.VaultkeeperAIPlugin);
        super(plugin.app);
    }

    onOpen() {
        const { contentEl, modalEl, containerEl } = this;

        containerEl.addClass(Selector.HelpModal);
        modalEl.addClass(Selector.HelpModal);

        this.component = mount(HelpModalSvelte, {
            target: contentEl,
            props: {
                onClose: () => this.close(),
                initialTopic: this.initialTopic
            }
        });
    }

    public open(initialTopic?: number): void {
        this.initialTopic = initialTopic;
        super.open();
    }

    onClose() {
        if (this.component) {
            void unmount(this.component);
            this.component = null;
        }

        const { contentEl } = this;
        contentEl.empty();
    }
}