<template>
    <div class="d-flex justify-content-center">
        <loading v-if="isLoading"></loading>
            <div class="discoveryRight">
                <table>
                    <tr>
                        <td colspan="2"><h4 class="d-flex justify-content-center">--- Discovery type ---</h4></td>
                    </tr>
                    <tr>
                        <td>Discovery method:</td>
                        <td><select class="form-control" v-model="selectedDiscovery" required>
                            <option v-for="discovery in discoveryList" :value="discovery.value" :selected="discovery == selectedDiscovery"> {{discovery.text}} </option>
                        </select></td>
                    </tr>
                    <tr v-if="selectedDiscovery == 'ARTIFACTS'">
                        <select class="form-control" v-model="selectedArtifact" v-on:change="onArtifactChange">
                            <option v-for="artifact in artifactList" :value="artifact"> {{artifact}} </option>
                        </select>
                    </tr>
                    <tr v-if="selectedDiscovery == 'ARTIFACTS'">
                        <td>
                            <p>Include:</p>
                            <select class="form-control" multiple size="10" v-model="includedListSelected">
                                <option v-for="item in includedList" :value="item">{{item}}</option>
                            </select>
                        <td>
                            <input class="btn btn-outline-secondary" type="button" value="<<<" v-on:click="addInclude" />
                            <input class="btn btn-outline-secondary" type="button" value=">>>" v-on:click="removeInclude" />
                        </td>
                            <p>Artifacts:</p>
                            <select class="form-control" multiple v-model="artifactItemListSelected" size="10">
                                <option v-for="item in artifactItemList" :value="item">{{item}}</option>
                            </select>
                        </td>
                    </tr>
                    <tr><td> </td></tr>

                    <tr>
                        <td colspan="2"><h4 class="d-flex justify-content-center">--- Model complexity measures threshold ---</h4></td>
                        <td>
                            <button class="btn btn-outline-warning" v-b-tooltip.hover title="Leave field blank if you don't want to include the measure.">?</button>
                            <button class="btn btn-outline-warning" v-b-tooltip.hover title="If model with only one trace exceeds defined measures, model will be added to the list.">?</button>
                        </td>
                    </tr>
                    <tr>
                        <td>Number of the nodes</td>
                        <td><input class="form-control" type="number" v-model="nodes" value="10" step="1" min="1" /></td>
                        <td><button class="btn btn-outline-warning" v-b-tooltip.hover title="Number of the nodes in the model.">?</button></td>
                    </tr>
                    <tr>
                        <td>Density</td>
                        <td><input class="form-control" type="number" v-model="density" value="1.0" step="0.01" /></td>
                        <td><button class="btn btn-outline-warning" v-b-tooltip.hover title="Rate between existing flows in the model and all possible flows.">?</button></td>
                    </tr>
                    <tr>
                        <td>Cohesion</td>
                        <td><input class="form-control" type="number" v-model="cohesion" value="1.0" step="0.01" /></td>
                        <td><button class="btn btn-outline-warning" v-b-tooltip.hover title="Shows straight of relationship between the nodes.">?</button></td>
                    </tr>
                    <tr>
                        <td>Coupling</td>
                        <td><input class="form-control" type="number" v-model="coupling" value="1.0" step="0.01" /></td>
                        <td><button class="btn btn-outline-warning" v-b-tooltip.hover title="Rate of nodes with two-way connection and number of possible pairs.">?</button></td>
                    </tr>
                    <tr>
                        <td>Coefficient of network connectivity (CNC)</td>
                        <td><input class="form-control" type="number" v-model="cnc"  value="1.0" step="0.01" /></td>
                        <td><button class="btn btn-outline-warning" v-b-tooltip.hover title="Number of arcs(flows) divided by number of nodes.">?</button></td>
                    </tr>

                    <tr>
                        <td colspan="2">
                            <h4 class="d-flex justify-content-center">--- Algorithm parameters setup ---</h4>
                            <button class="btn btn-outline-success" v-on:click="switchShowParams"> {{showAlgParams.text}} </button>
                        </td>
                    </tr>
                    <tr v-if="showAlgParams.val">
                        <td>Algorithm:</td>
                        <td><select class="form-control" v-model="selectedMethod" required>
                            <option v-for="method in methodList" :value="method.value" :selected="method.value == 'SPLITMINER'"> {{method.value}} </option>
                        </select></td>
                    </tr>
                    <tr v-if="selectedMethod == 'SPLITMINER' && showAlgParams.val">
                        <td>Percentile Frequency Threshold:</td>
                        <td><input class="form-control" type="number" v-model="percentileFrequencyThreshold" value="1.0" step="0.01" min="0" required></td>
                    </tr>
                    <tr v-if="selectedMethod == 'SPLITMINER' && showAlgParams.val">
                        <td>Parallelisms Threshold:</td>
                        <td><input class="form-control" type="number" v-model="parallelismsThreshold" value="1.0" step="0.01" min="0" required></td>
                    </tr>
                    <tr v-if="selectedMethod == 'SPLITMINER' && showAlgParams.val">
                        <td>Filter type:</td>
                        <td><select class="form-control" v-model="filterType" required>
                            <option value="STD" selected> STD </option>
                            <option value="NOF"> NOF </option>
                            <option value="FWG"> FWG </option>
                            <option value="WTH"> WTH </option>
                        </select></td>
                    </tr>
                    <tr v-if="selectedMethod == 'SPLITMINER' && showAlgParams.val">
                        <td><label for="parallelismsFirst">Parallelisms First</label></td>
                        <td><input class="form-control" type="checkbox" id="parallelismsFirst" v-model="parallelismsFirst"></td>
                    </tr>
                    <tr v-if="selectedMethod == 'SPLITMINER' && showAlgParams.val">
                        <td><label for="replaceIORs">Replace IORs</label></td>
                        <td><input class="form-control" type="checkbox" id="replaceIORs" v-model="replaceIORs"></td>
                    </tr>
                    <tr v-if="selectedMethod == 'SPLITMINER' && showAlgParams.val">
                        <td><label for="removeLoopActivities">Remove Loop Activities</label></td>
                        <td><input class="form-control" type="checkbox" id="removeLoopActivities" v-model="removeLoopActivities"></td>
                    </tr>
                    <tr v-if="selectedMethod == 'SPLITMINER' && showAlgParams.val">
                        <td>Structuring Time:</td>
                        <td><select class="form-control" v-model="structuringTime" required>
                            <option value="NONE" selected> NONE </option>
                            <option value="POST"> POST </option>
                            <option value="PRE"> PRE </option>
                        </select></td>
                    </tr>
                </table>
            </div>
    </div>

</template>

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

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

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

    export default {
        name: "discovery",
        data: function () {
            return {
                isLoading: false,
                artifactsLoaded: false,

                selectedArtifact:'',
                oldSelectedArtifact:'',
                artifactList:[],
                artifactOriginalMap:new Map(),
                artifactFilterMap:new Map(),

                includedList:[],
                artifactItemList:[],
                includedListSelected:[],
                artifactItemListSelected:[],

                methodList: [
                    {value: "SPLITMINER"},
                ],
                discoveryList: [
                    {value: "FREQUENCY", text:"Process discovery by trace frequency"},
                    {value: "ARTIFACTS", text:"Process discovery by included/excluded artifacts"},
                    {value: "SHORT_TRACE", text:"Process discovery by the shortest traces"},
                    {value: "LONG_TRACE", text:"Process discovery by the longest traces"},
                    {value: "TIME_LONG", text:"Process discovery by the most time consuming trace"},
                    {value: "TIME_SHORT", text:"Process discovery by the least time consuming trace"},
                ],

                token:this.$route.params.token,

                nodes:null,
                density:null,
                cohesion:null,
                coupling:null,
                cnc:null,

                selectedDiscovery:'FREQUENCY',

                selectedMethod:'SPLITMINER',

                percentileFrequencyThreshold:0.5,
                parallelismsThreshold:0.5,
                filterType:'STD',
                parallelismsFirst:false,
                replaceIORs:false,
                removeLoopActivities:false,
                structuringTime:'NONE',

                showAlgParams: {text: "Show", val:false},
            }
        },

        components: {
            Loading,
        },

        beforeMount() {
        },

        methods: {
            switchShowParams(){
                if(this.showAlgParams.val){
                        this.showAlgParams.val = false;
                        this.showAlgParams.text = "Show";
                }
                else{
                        this.showAlgParams.val = true;
                        this.showAlgParams.text = "Hide";
                }
            },

            onArtifactChange() {
                var lists = new Object();
                lists.includedItems = this.includedList;

                this.artifactFilterMap.set(this.oldSelectedArtifact, lists);
                this.oldSelectedArtifact = this.selectedArtifact;

                this.artifactItemList = this.artifactOriginalMap.get(this.selectedArtifact);
                this.includedList = this.artifactFilterMap.get(this.selectedArtifact).includedItems;
            },


            updateOriginalMap() {
                this.artifactOriginalMap.set(this.selectedArtifact, this.artifactItemList)
            },
            addInclude() {
                this.includedList = this.includedList.concat(this.artifactItemListSelected);

                this.artifactItemList = this.artifactItemList.filter(x => {
                    return !this.includedList.includes(x);
                } );

                this.updateOriginalMap();
            },
            removeInclude() {
                this.artifactItemList = this.artifactItemList.concat(this.includedListSelected);

                this.includedList = this.includedList.filter(x => {
                    return !this.includedListSelected.includes(x);
                } );

                this.updateOriginalMap();
            },

            getArtifactList() {
                let header = axios.create({headers: {'Content-Type': 'multipart/form-data'}});

                Request.getAxios().get(this.$hostname + "/artifacts/" + this.token, header).then((response) => {

                    this.selectedArtifact = response.data.content[0].artifact;
                    this.artifactItemList = response.data.content[0].elements;
                    this.oldSelectedArtifact = this.selectedArtifact;

                    response.data.content.forEach(artifact => {
                        this.artifactList.push(artifact.artifact);
                    });

                    response.data.content.forEach(artifact => {
                        this.artifactOriginalMap.set(artifact.artifact, artifact.elements);
                    });

                    response.data.content.forEach(artifact => {
                        var lists = new Object();
                        lists.includedItems = [];
                        this.artifactFilterMap.set(artifact.artifact, lists);
                    });

                    this.isLoading = false;
                });
            },

            sendData() {
                this.onArtifactChange();
                this.$emit('settingsChanged',
                        [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
                        ]
                );
            },
        },

        watch: {
            artifactFilterMap: {
                handler: function() {
                    this.sendData();
                }
            },
            nodes: {
                handler: function() {
                    if(this.nodes == (""))
                        this.nodes = null;
                    this.sendData();
                }
            },
            density: {
                handler: function() {
                    if(this.density == (""))
                        this.density = null;
                    this.sendData();
                }
            },
            cohesion: {
                handler: function() {
                    if(this.cohesion == (""))
                        this.cohesion = null;
                    this.sendData();
                }
            },
            coupling: {
                handler: function() {
                    if(this.coupling == (""))
                        this.coupling = null;
                    this.sendData();
                }
            },
            cnc: {
                handler: function() {
                    if(this.cnc == (""))
                        this.cnc = null;
                    this.sendData();
                }
            },
            selectedDiscovery: {
                handler: function() {
                    if(!this.artifactsLoaded){
                        this.isLoading = true;
                        this.getArtifactList();
                        this.artifactsLoaded = true;
                    }

                    this.sendData();
                }
            },
            selectedMethod: {
                handler: function() {
                    this.sendData();
                }
            },
            percentileFrequencyThreshold: {
                handler: function() {
                    if(this.percentileFrequencyThreshold == (""))
                        this.percentileFrequencyThreshold = 0.5;
                    this.sendData();
                }
            },
            parallelismsThreshold: {
                handler: function() {
                    if(this.parallelismsThreshold == (""))
                        this.parallelismsThreshold = 0.5;
                    this.sendData();
                }
            },
            filterType: {
                handler: function() {
                    this.sendData();
                }
            },
            parallelismsFirst: {
                handler: function() {
                    this.sendData();
                }
            },
            replaceIORs: {
                handler: function() {
                    this.sendData();
                }
            },
            removeLoopActivities: {
                handler: function() {
                    this.sendData();
                }
            },
            structuringTime: {
                handler: function() {
                    this.sendData();
                }
            },
        }
    }
</script>