import { CancelToken } from "@web-atoms/core/dist/core/types";
import { Inject } from "@web-atoms/core/dist/di/Inject";
import Action from "@web-atoms/core/dist/view-model/Action";
import { Validate, Watch } from "@web-atoms/core/dist/view-model/AtomViewModel";
import { AtomWindowViewModel } from "@web-atoms/core/dist/view-model/AtomWindowViewModel";
import Load from "@web-atoms/core/dist/view-model/Load";
import FileService from "../../services/FileService";
import basic from "./templates/basic";
import flyout from "./templates/flyout";
import list from "./templates/list";

export default class NewAppViewModel extends AtomWindowViewModel {

    public appTypes = [
        { label: "Create", value: "create" },
        { label: "Explore", value: "explore" }
    ];

    public appType = "create";

    public search: string = "";

    public templates = [
        flyout,
        basic,
        list
    ];

    public selected = this.templates[0];

    public url: string = "";

    public urlAvailable: boolean = true;

    @Watch
    public get errorUrl() {
        const url = this.url;
        const available = this.urlAvailable;
        if (!url) {
            return "";
        }
        if (!available) {
            return "Url not available";
        }
        const tokens = url.split("/");
        for (const iterator of tokens) {
            if (/^[0-9]/.test(iterator)) {
                return "Url fragment cannot start with a number";
            }
            if (/[^a-z0-9\-\.]/.test(iterator)) {
                return "Url fragment can only contain alpha numeric characters and dash";
            }
        }
        return "";
    }

    @Inject
    private fileService: FileService;

    @Watch
    public updateTitle() {
        this.title = this.appType === "create"
            ? "Create New Application"
            : "Explore the sample";
    }

    @Load({ watch: true, watchDelayMS: 500 })
    public async checkUrl(ct: CancelToken) {
        const url = this.url;
        if (!url) {
            this.urlAvailable = true;
            return;
        }

        if (this.errorUrl) {
            return;
        }

        this.urlAvailable = !(await this.fileService.check(url));
    }

    @Action({ validate: true })
    public async create() {

        const folder = await this.fileService.create({
            title: this.selected.label,
            description: this.selected.label,
            url: this.url || null
        });

        this.close({
            template: this.selected,
            url: folder.sourceUrl
        });
    }

    public async open(data) {
        this.close({
            url: data.value
        });
    }

}