<template>
    <div class="d-flex justify-content-center">
        <div class="discoveryRight">
            <discovery @settingsChanged="handleData($event)"></discovery>
            <input @click.self="modalIsOpen = true;" type="submit" class="btn btn-success" value="Start" name="submit" v-on:click="submit" />
        </div>
    </div>
</template>

<style>
    table {
        margin-top: 20px;
    }

    td {
        padding: 10px;
        text-align: center;
    }
</style>

<script>
    import axios from "axios";
    import Request from '../components/request/request.js';
    import Discovery from "../components/discovery/settings.vue";

    export default {
        name: "discoverySettings",
        data: function () {
            return {
                artifactFilterMap:new Map(),
                token:this.$route.params.token,
                nodes:null,
                density:null,
                cohesion:null,
                coupling:null,
                cnc:null,
                selectedDiscovery:'FREQUENCY',
                selectedMethod:'SPLITMINER',
                percentileFrequencyThreshold:1,
                parallelismsThreshold:1,
                filterType:'STD',
                parallelismsFirst:false,
                replaceIORs:false,
                removeLoopActivities:false,
                structuringTime:'NONE',
                modalIsOpen:false,
            }
        },

        components: {
            Discovery
        },

        methods: {
            submit() {
                let formData = new FormData();

                var tmpFilterMap = Array.from(this.artifactFilterMap).map( ([k,v]) => {return {[k]:v}} );

                var mapStatMeasures = {
                    'nodes':this.nodes,
                    'density':this.density,
                    'cohesion':this.cohesion,
                    'coupling':this.coupling,
                    'cnc':this.cnc
                };

                var methodParams = {
                    'percentileFrequencyThreshold':this.percentileFrequencyThreshold,
                    'parallelismsThreshold':this.parallelismsThreshold,
                    'filterType':this.filterType,
                    'parallelismsFirst':this.parallelismsFirst,
                    'replaceIORs':this.replaceIORs,
                    'removeLoopActivities':this.removeLoopActivities,
                    'structuringTime':this.structuringTime,
                };

                formData.append('discovery', this.selectedDiscovery);
                formData.append('algorithm', this.selectedMethod);
                formData.append('statMeasures', JSON.stringify(mapStatMeasures));
                formData.append('methodParams', JSON.stringify(methodParams));
                formData.append('artifactFilterMap', JSON.stringify(tmpFilterMap));


                this.$router.push({name: "loading", params: {token: this.token, formData: formData}});
            },

            handleData: function(e) {
                [
                   this.artifactFilterMap,

                   this.nodes,
                   this.density,
                   this.cohesion,
                   this.coupling,
                   this.cnc,

                   this.selectedDiscovery,
                   this.selectedMethod,

                   this.percentileFrequencyThreshold,
                   this.parallelismsThreshold,
                   this.filterType,
                   this.parallelismsFirst,
                   this.replaceIORs,
                   this.removeLoopActivities,
                   this.structuringTime
                ] = e;
            }
        }
    }
</script>