const getRequestBody = (items) => {
    return {
        method: "POST",
        headers: {
            "Content-Type": "application/json",
        },
        body: JSON.stringify(items),
    };
};

new Vue({
    el: "#app",
    data() {
        return {
            selectedProject: "my-workplace-host-playground-custom",
            selectedEuiVersion: "16.x",
            remotes: [],
            selectedRemotes: [],
            selectedInstalledRemotes: [],
            deps: [],
            packages: [],
            saveConfigSubmitted: false,
            saveConfigOK: false,
            configPackages: null
        };
    },
    created() {
        this.getRemotes();
        this.getConfig();
    },
    methods: {
        async getRemotes() {
            const res = await fetch("http://localhost:3000/api/remotesForConfig");
            const finalRes = await res.json();
            this.remotes = finalRes;
        },
        async getConfig() {
            const res = await fetch("http://localhost:3000/api/config");
            const finalRes = await res.json();

            if (Object.keys(finalRes).length !== 0) {
                this.selectedApp = finalRes.project;
                this.selectedEuiVersion = finalRes.euiVersion;
                this.selectedRemotes = finalRes.remotes;
                this.selectedInstalledRemotes = finalRes.installedRemotes;
                this.deps = finalRes.deps;
                this.packages = finalRes.packages;
                this.configPackages = finalRes.packages;
            }
        },
        async getPackages() {
            const res = await fetch("http://localhost:3000/api/remotes/packages", getRequestBody(this.selectedRemotes));
            const finalRes = await res.json();
            this.deps = finalRes.deps;

            this.packages = finalRes.packages.filter(
                (p) => p.name.indexOf("csdr-") < 0 && p.name.indexOf("cc-shared-ui") < 0 && p.name.indexOf("mywp-shared-ui") < 0
            );
            if (this.configPackages) {
              this.packages = this.packages.map((p) => {
                const configPkg = this.configPackages.find(cp => cp.name === p.name);
                return {
                  name: p.name,
                  branch: configPkg.branch,
                }
              })
            }
        },
        reset() {
            this.selectedRemotes = [];
            this.selectedInstalledRemotes = [];
            this.packages = [];
            this.deps = [];
            this.saveConfigOK = false;
            this.saveConfigSubmitted = false;
        },
        async saveConfig() {
            console.log("Saving configuration...");
            const res = await fetch(
                "http://localhost:3000/api/config",
                getRequestBody({
                    project: this.selectedProject,
                    euiVersion: this.selectedEuiVersion,
                    remotes: this.selectedRemotes,
                    installedRemotes: this.selectedInstalledRemotes,
                    deps: this.deps,
                    packages: this.packages,
                })
            );

            if (res.status !== 200) {
                this.saveConfigOK = false;
            } else {
                this.saveConfigOK = true;
            }
            this.saveConfigSubmitted = true;
        },
        isRemoteSelected(remoteName) {
          return this.selectedRemotes.includes(remoteName);
        },
        isInstallRemoteSelected(remoteName) {
          return this.selectedInstalledRemotes.includes(remoteName);
        }
    },
    watch: {
        selectedRemotes: {
            handler: function (val) {
                this.saveConfigOK = false;
                this.saveConfigSubmitted = false;
                this.getPackages();
            },
            deep: true,
        },
        selectedInstalledRemotes: {
            handler: function (val) {
                this.saveConfigOK = false;
                this.saveConfigSubmitted = false;
            },
            deep: true,
        },
    },
});
