<template>
  <div class="row">
    <div class="col-md-12">
      <div class="form-group row">
        <label class="col-md-4 col-form-label">Minimal window size</label>
        <div class="col-md-8">
          <input
              type="number"
              class="form-control"
              v-model="minWindowSize"
              step="1"
              min="10"
              max="10000"
              @input="updateValue($event.target.value, 'minWindowSize')"
          />
        </div>
      </div>

      <div class="form-group row">
        <label class="col-md-4 col-form-label">Minimal GC percentage</label>
        <div class="col-md-8">
          <input
              type="number"
              class="form-control"
              v-model="minGcPercentage"
              step="0.001"
              min="0"
              max="1"
              @input="updateValue($event.target.value, 'minGcPercentage')"
          />
        </div>
      </div>

      <div class="form-group row">
        <label class="col-md-4 col-form-label">Minimal observed/expected CpG</label>
        <div class="col-md-8">
          <input
              type="number"
              class="form-control"
              v-model="minObservedToExpectedCpG"
              step="0.001"
              min="0"
              max="1"
              @input="updateValue($event.target.value, 'minObservedToExpectedCpG')"
          />
        </div>
      </div>

      <div class="form-group row">
        <label class="col-md-4 col-form-label">Minimal island merge gap</label>
        <div class="col-md-8">
          <input
              type="number"
              class="form-control"
              v-model="minIslandMergeGap"
              step="1"
              min="10"
              max="10000"
              @input="updateValue($event.target.value, 'minIslandMergeGap')"
          />
        </div>
      </div>

      <div class="form-group row">
        <label class="col-md-4 col-form-label">First nucleotide</label>
        <div class="col-md-8">
          <input
              type="text"
              class="form-control"
              v-model="firstNucleotide"
              @input="updateValue($event.target.value, 'firstNucleotide')"
          />
        </div>
      </div>

      <div class="form-group row">
        <label class="col-md-4 col-form-label">Second nucleotide</label>
        <div class="col-md-8">
          <input
              type="text"
              class="form-control"
              v-model="secondNucleotide"
              @input="updateValue($event.target.value, 'secondNucleotide')"
          />
        </div>
      </div>

      <div class="alert alert-danger" v-if="$v.$anyError">
        <div v-if="!$v.minSequenceSize.required">Minimal sequence size is required.</div>
        <div v-if="!$v.minSequenceSize.numeric">Minimal sequence size must be numeric.</div>
        <div v-if="!$v.minSequenceSize.minValue">Minimal length of sequence is {{ $v.minSequenceSize.$params.minValue.min }}.</div>
        <div v-if="!$v.threshold.required">Threshold is required.</div>
        <div v-if="!$v.threshold.decimal">Threshold must be decimal number.</div>
        <div v-if="!$v.threshold.minValue">Minimal value of threshold is {{ $v.threshold.$params.minValue.min }}.</div>
      </div>

      <div class="text-right">
        <slot name="additionalButtons"></slot>
      </div>
    </div>
  </div>
</template>

<script>
import { required, numeric, minValue, decimal } from 'vuelidate/lib/validators'

export default {
  props: {
    minWindowSize: {
      type: [Number, String],
      default: 200 
    },
    minGcPercentage: {
      type: [Number, String],
      default: 0.5
    },
    minObservedToExpectedCpG: {
      type: [Number, String],
      default: 0.6 
    },
    minIslandMergeGap: {
      type: [Number, String],
      default: 100
    },
    firstNucleotide: {
      type: [Number, String],
      default: "C" 
    },
    secondNucleotide: {
      type: [Number, String],
      default: "G" 
    },
  },
  created() {
  this.minSequenceSize = Number(this.minSequenceSize);
  this.threshold = Number(this.threshold);
  },
  validations: {
    minWindowSize: {
      required,
      numeric,
      minValue: minValue(0)
    },
    minGcPercentage: {
      required,
      decimal,
      minValue: minValue(0)
    },
    minObservedToExpectedCpG: {
      required,
      decimal,
      minValue: minValue(0)
    },
    minIslandMergeGap: {
      required,
      numeric,
      minValue: minValue(0)
    },
    firstNucleotide: {
      required,
    },
    secondNucleotide: {
      required,
    },

  },
  methods: {
    updateValue: function(value, type) {
      this[type] = value; // Aktualizácia lokálnej hodnoty
      this.$v[type].$touch(); // Aktivuje validáciu
      this.$emit('checkModel', value, type)
    },
  },
}
</script>