<template>
    <div>
        <loading v-if="isLoading"></loading>
        <div>
            <table class="table is-striped">
                <thead>
                    <tr class="bg-dark">
                        <th class="has-text-center text-white" v-for="head in headers">
                            {{head}}
                        </th>
                    </tr>
                    <tr class="table-success">
                        <th class="text-center" v-for="head in headers">
                            <select class="form-control" v-model="types[head]" required>
                                <option v-for="type in typeList" :value="type.type" :selected="type.type == types[head]" :disabled="type.disabled"> {{type.text}} </option>
                            </select>
                        </th>
                    </tr>
                    <tr class="table-success">
                        <th class="text-center" v-for="head in headers">
                            <input v-if="types[head] == 'timestamp'" placeholder="Date format" class="form-control" type="text" ref="dateformat" v-model="dateformat" required />
                        </th>
                    </tr>
                </thead>

                <tbody>
                <tr v-for="row in values">
                    <td v-for="cell in row">{{cell}}</td>
                </tr>
                </tbody>
            </table>
        </div>

        <div class="btn">
            <p><input class="btn btn-success" @click.self="isLoading = true;" type="submit" value="Continue" name="submit" v-on:click="submit" /></p>
        </div>
    </div>
</template>

<script>
    import axios from "axios";
    import Request from '../components/request/request.js';
    import Loading from "../components/loading/pageLoading.vue";

    export default {
        name: "columns",
        data: function () {
            return {
                typeList: [
                    {type: undefined, text: "Choose a type", disabled: true},
                    {type: 'trace', text: 'trace', disabled: false},
                    {type: 'activity', text: 'activity', disabled: false},
                    {type: 'timestamp', text: 'timestamp', disabled: false},
                    {type: 'resource', text: 'resource', disabled: false},
                    {type: 'lifecycle', text: 'lifecycle', disabled: false},
                    {type: 'other', text: 'other', disabled: false}],
                headers: [],
                types: [],
                values: [],
                token: '',
                sep: '',
                dateformat: '',
                isLoading: true,
            }
        },

        components: {
            Loading,
        },

        beforeMount() {
            this.token = this.$route.params.token;
            this.sep = this.$route.params.sep;

            const types = {}
            this.headers.forEach((head) => {
                types[head[1]] = null;
            })
            this.types = types;

            this.loadCols();
        },

        computed: {
          	typesArr () {
            	return Object.keys(this.types).reduce((acc, itemKey) => {
        				acc[itemKey] = this.types[itemKey];
        				return acc;
                }, new Map())
            }
        },

        methods: {
            loadCols() {
                let formData = new FormData();
                formData.append('sep', this.sep);
                Request.getAxios().post(this.$hostname + "/parse/" + this.token, formData)
                .then(response => {
                    this.headers = response.data.content[0].names;
                    this.types = response.data.content[0].types;

                    response.data.content.forEach(x => {this.values.push(x.values)});

                    this.isLoading = false;
                });
            },
            submit() {
                let formData = new FormData();
                formData.append('map', JSON.stringify(this.typesArr));
                formData.append('dateformat', this.dateformat);

                Request.getAxios().post(this.$hostname + "/update/" + this.token, formData)
                .then(response => {
                    this.isLoading = false;
                    this.$router.push({name: "discovery-settings", params: { token: this.token }});
                });
            }
        },

        watch:{
            typesArr:{
                handler: function() {
                    //typesArr.contains()
                }
            }
        }
    }
</script>
