<template>
  <div>
    <div class="row align-items-center">
      <div class="col-lg-1"><p>Separate classified incorrectly (predict %)</p></div>
      <div class="col-lg-2"><div id="slider-stepNeg"></div></div>
      <div class="col-lg-1"><p id="value-stepNeg"></p></div>
      <div class="col-lg-4">
        <label id="data" for="param-dataset" data-toggle="tooltip" data-placement="right" title="Tip: use one of the data sets already provided or upload a new file.">{{ dataset }}</label>
        <select id="selectFile" @change="selectDataSet()">
            <option value="HeartC.csv">Heart disease</option>
            <option value="IrisC.csv" selected>Iris flower</option>
            <option value="local">Upload file</option>
        </select>
        <button class="btn-outline-success"
        id="initializeID"
        v-on:click="initialize">
        <font-awesome-icon icon="play-circle" />
        {{ searchText }}
        </button>
        <button class="btn-outline-danger"
        id="resetID"
        v-on:click="reset">
        <font-awesome-icon icon="trash" />
        {{ resetText }}
        </button>
      </div>
      <div class="col-lg-1"><p>Separate classified correctly (predict %)</p></div>
      <div class="col-lg-2"><div id="slider-stepPos"></div></div>
      <div class="col-lg-1"><p id="value-stepPos"></p></div>
    </div>
  </div>
</template>

<script>
import Papa from 'papaparse'
import { EventBus } from '../main.js'
import {$,jQuery} from 'jquery';
import * as d3Base from 'd3'
import { sliderBottom } from 'd3-simple-slider'

// attach all d3 plugins to the d3 library
const d3 = Object.assign(d3Base, { sliderBottom })

export default {
  name: 'DataSetSlider',
  data () {
    return {
      defaultDataSet: 'IrisC', // default value for the first data set
      searchText: 'Feature search',
      resetText: 'Factory reset',
      dataset: 'Data set'
    }
  },
  methods: {
    selectDataSet () {   
      const fileName = document.getElementById('selectFile')
      this.defaultDataSet = fileName.options[fileName.selectedIndex].value
      this.defaultDataSet = this.defaultDataSet.split('.')[0]

      if (this.defaultDataSet == "DiabetesC" || this.defaultDataSet == "HeartC" || this.defaultDataSet == "IrisC" || this.defaultDataSet == "StanceC") { // This is a function that handles a new file, which users can upload.
        this.dataset = "Data set"
        d3.select("#data").select("input").remove(); // Remove the selection field.
        EventBus.$emit('SendToServerDataSetConfirmation', this.defaultDataSet)
      } else {
        EventBus.$emit('SendToServerDataSetConfirmation', this.defaultDataSet)
        d3.select("#data").select("input").remove();
        this.dataset = ""
        var data
        d3.select("#data")
          .append("input")
          .attr("type", "file")
          .style("font-size", "18.5px")
          .style("width", "200px")
          .on("change", function() {
            var file = d3.event.target.files[0];
            Papa.parse(file, {
                header: true,
                dynamicTyping: true,
                skipEmptyLines: true,
                complete: function(results) {
                  data = results.data;
                  EventBus.$emit('SendToServerLocalFile', data)
                }
              });
          })
      }
    },
    reset () {
      EventBus.$emit('reset')
      EventBus.$emit('alternateFlagLock')
    },
    initialize () {
      EventBus.$emit('ConfirmDataSet')
    },
    InitSliders () {  
      var dataCorrect = [55.0, 60.0, 65.0, 70.0, 75.0, 80.0, 85.0, 90.0, 95.0];
      var dataWrong = [5.0, 10.0, 15.0, 20.0, 25.0, 30.0, 35.0, 40.0, 45.0];

        var sliderStepPos = d3
          .sliderBottom()
          .min(d3.min(dataCorrect))
          .max(d3.max(dataCorrect))
          .width(300)
          .tickFormat(d3.format(".0f"))
          .ticks(9)
          .step(5)
          .default(75.0)
          .on('onchange', val => {
            d3.select('p#value-stepPos').text(d3.format(".0f")(val));
            EventBus.$emit('SendtheChangeinRangePos', d3.format(".0f")(val))
          });

        var gStepPos = d3
          .select('div#slider-stepPos')
          .append('svg')
          .attr('width', 400)
          .attr('height', 80)
          .append('g')
          .attr('transform', 'translate(30,30)');

        gStepPos.call(sliderStepPos);

        d3.select('p#value-stepPos').text(d3.format(".0f")(sliderStepPos.value()));

        var sliderStepNeg = d3
          .sliderBottom()
          .min(d3.min(dataWrong))
          .max(d3.max(dataWrong))
          .width(300)
          .tickFormat(d3.format(".0f"))
          .ticks(9)
          .step(5)
          .default(25.0)
          .on('onchange', val => {
            d3.select('p#value-stepNeg').text(d3.format(".0f")(val));
            EventBus.$emit('SendtheChangeinRangeNeg', d3.format(".0f")(val))
          });

        var gStepNeg = d3
          .select('div#slider-stepNeg')
          .append('svg')
          .attr('width', 400)
          .attr('height', 80)
          .append('g')
          .attr('transform', 'translate(30,30)');

        gStepNeg.call(sliderStepNeg);

        d3.select('p#value-stepNeg').text(d3.format(".0f")(sliderStepNeg.value()));
    },
  },
  mounted () {
    this.InitSliders()
  },
}
</script>
