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

new Vue({
    el: "#app",
    data() {
        return {
            params: {},
            isParamsValid: false,
            options: {},
            saveOK: false,
            saveSubmitted: false,
        };
    },
    created() {
        this.params = this.getDefaultParams();

        this.options = {
            pkgTypes: [
                { label: "Backend - springBoot micro-service", value: "backend" },
                { label: "Frontend UI package or remote", value: "frontend" },
            ],
            frontendVersions: [
              { label: "17.x", value: "17" },
              { label: "18.x", value: "18" }
            ],
            frontendTypes: [
                { label: "default UI package", value: "default" },
                { label: "Remote micro-frontend package", value: "remote" },
            ],
        };
    },
    methods: {
        reset() {
            this.params = this.getDefaultParams();
        },
        getDefaultParams() {
            return {
                pkgType: "frontend",
                pkgFrontendVersion: "17",
                pkgFrontendType: "default",
                pkgScope: "@zzz",
                pkgName: "my-package",
                csdrRepo: true,
                pkgFrontendParticipant: false,
                pkgFrontendParticipantNgRx: false,
                pkgGroupId: "eu.europa.ec.cc",
                remoteConfig: {
                    rmTeamName: "cc-digit-ui-rm",
                    options: {},
                },
            };
        },
        validateParams(params) {
            this.isParamsValid = false;

            if (params.pkgType) {
                if (params.pkgType === "backend") {
                    if (params.pkgScope && params.pkgName && params.pkgGroupId) {
                        this.isParamsValid = true;
                    }
                } else {
                    if (
                        params.pkgFrontendVersion &&
                        params.pkgFrontendType &&
                        params.pkgScope &&
                        params.pkgName &&
                        params.pkgScope.substr(0, 1) === "@"
                    ) {
                        this.isParamsValid = true;
                    }
                }
            }
        },
        async save() {
            this.saveSubmitted = false;

            if (!this.isParamsValid) {
                return;
            }
            const res = await fetch(
                "http://localhost:3000/api/package-init",
                getRequestBody({
                    params: this.params,
                })
            );

            if (res.status !== 200) {
                this.saveOK = false;
            } else {
                this.saveOK = true;
            }
            this.saveSubmitted = true;

            const finalRes = await res.json();
            console.log(finalRes);
        },
    },
    watch: {
        params: {
            handler: function (val) {
                this.validateParams(val);
                this.saveOK = false;
                this.saveSubmitted = false;
            },
            deep: true,
        },
    },
    computed: {
        paramsJson: function (v) {
            let params = {};

            params.pkgType = this.params.pkgType;
            params.pkgScope = this.params.pkgScope;
            params.pkgName = this.params.pkgName;

            if (this.params.pkgType === "backend") {
                params.pkgGroupId = this.params.pkgGroupId;
            } else {
                params.pkgFrontendType = this.params.pkgFrontendType;
                params.pkgFrontendVersion = this.params.pkgFrontendVersion;

                if (this.params.pkgFrontendType === "default") {
                    params.csdrRepo = this.params.csdrRepo;
                    if (!params.csdrRepo) {
                        params.externalRepoName = this.params.externalRepoName;
                    }
                    params.pkgFrontendParticipant = this.params.pkgFrontendParticipant;
                    params.pkgFrontendParticipantNgRx = this.params.pkgFrontendParticipantNgRx;
                } else {
                    params.remoteConfig = this.params.remoteConfig;
                }
            }

            return JSON.stringify(params, null, 2);
        },
    },
});
