<template>
    <div id="app">
        <button @click="getStore">CHANGE THEME</button>
    </div>
</template>

<script lang="ts">
    import {Component, Vue} from "vue-property-decorator";
    import HelloWorld from "./components/HelloWorld.vue";
    import StoresData from "@/stores";
    import stores from "@/stores";

    @Component({
        components: {
            HelloWorld,
        },
    })
    export default class App extends Vue {


        private url = "https://use1.ing.dev.fitstation4me.com/store/api/v1/stores/";

        // private url = "http://hp-store-service.hp/store/api/v1/stores/";

        async get(storeID: string): Promise<IStore> {

            const query = await fetch(
                this.url + storeID,
                {method: "GET"}
            );

            const response = await query.json();
            const configuration = response.configurations.find((i: { configuration_type: string; }) => i.configuration_type === "appinapp");
            return {
                companyID: response.company_id,
                storeID,
                configurationID: configuration ? configuration.configuration_id : undefined
            };
        }

        async delete(storeID: string, configurationID: string) {
            return await fetch(
                this.url + storeID + "/configurations/id/" + configurationID,
                {method: "DELETE"}
            );
        }

        async post(storeID: string, companyID: string, theme: string,
                   configuration_type: string = "apollo", name: string = "Apollo configuration") {

            const data = {
                company_id: companyID,
                configuration_type,
                name,
                data: {enabled: true}
            };

            return await fetch(
                this.url + storeID + "/configurations",
                {
                    method: "POST",
                    headers: {
                        "Content-Type": "application/json"
                    },
                    body: JSON.stringify(data)
                }
            );
        }

        async getStore() {
            await this.setupStoreTheme("f3503d5c-bbfe-4672-8e0d-db44a0946e94", "napervilleRunning");
        }

        async setupStoreTheme(storeID: string, theme: string) {

            try {

                const store: IStore = await this.get(storeID);

                console.log(store);
                if (store.configurationID) {
                    await this.delete(store.storeID, store.configurationID);
                }

                await this.post(store.storeID, store.companyID, theme);

                console.log("%c Theme " + theme + " set successfully for store " + storeID, "color: green");
            } catch (e) {
                console.warn("%c Error for store: " + storeID, "color: red");
                console.error(storeID, e);
            }
        }

        async setupAllStores() {

            const storeData = new StoresData();
            for (const store of storeData.stores) {
                await this.setupStoreTheme(store.StoreID, store.StoreThemeName);
            }

        }

        async healthCheck() {

            const url = "http://hp-store-service.hp/store/api/v1/";

            const response = await fetch(
                this.url + "health",
                {method: "GET"}
            );

            console.log(response);
        }
    }

    interface IStore {
        companyID: string,
        storeID: string,
        configurationID: string | undefined;
    }

</script>

<style>
    #app {
        font-family: 'Avenir', Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-align: center;
        color: #2c3e50;
        margin-top: 60px;
    }
</style>