import { writable } from "svelte/store";
// import { SvelteComponent } from "svelte/internal";

export const ModalStore = writable<Modal<any> | undefined>(undefined);


abstract class Modal<T> {
    constructor(private title) { }

    private onResult: (result: T | null) => void;
    private closeOnResult: boolean;
    private noClose: boolean = false;

    abstract component: any;

    protected result(value: T | null) {
        if (this.closeOnResult)
            this.close()
        if (this.onResult)
            this.onResult(value);
    }

    /**
    * This function shows the modal
    * Do not call when using getResult()
    */
    public show(noClose = true) {
        this.noClose = noClose;
        ModalStore.set(this)
    }

    /**
     * Shows the modal and waits for result.
     * 
     * Call close when successful
     */
    public async getResult(close = true) {
        this.closeOnResult = close;
        this.show(false);
        return new Promise<T | null>((yes) => this.onResult = yes);
    }

    public close() {
        ModalStore.set(undefined);
    }
}

import YesNoComponent from "./components/modals/YesNo.svelte";
class YesNoModal extends Modal<boolean> {
    component = YesNoComponent;
}

import InputComponent from "./components/modals/Input.svelte";
class InputModal extends Modal<string> {
    component = InputComponent;

    constructor(title: string, private fieldname: string, private type: "text" | "password") {
        super(title);
    }
}


export const Modals = {
    YesNoModal: (title: string) => {
        return new YesNoModal(title);
    },
    InputModal: (title: string, fieldname: string, type: "text" | "password") => {
        return new InputModal(title, fieldname, type);
    }
}