<template>
  <div>
    <span class="v-label theme--light ">
      {{ label }}
    </span>
    <template>
      <v-row class="my-n5">
        <v-col cols="3">
          <v-text-field
            v-show="showDays"
            ref="daysPicker"
            :value="splitSpan.days"
            @input="updateSpan()"
            :readonly="readonly"
            :disabled="disabled"
            :label="$ay.t('TimeSpanDays')"
            type="number"
            :data-cy="'durationdays:' + testId"
          ></v-text-field>
        </v-col>
        <v-col cols="3">
          <v-text-field
            :value="splitSpan.hours"
            ref="hoursPicker"
            @input="updateSpan()"
            :readonly="readonly"
            :disabled="disabled"
            :label="$ay.t('TimeSpanHours')"
            type="number"
            :data-cy="'durationhours:' + testId"
          ></v-text-field>
        </v-col>
        <v-col cols="3">
          <v-text-field
            :value="splitSpan.minutes"
            ref="minutesPicker"
            @input="updateSpan()"
            :readonly="readonly"
            :disabled="disabled"
            :label="$ay.t('TimeSpanMinutes')"
            type="number"
            :data-cy="'durationminutes:' + testId"
          ></v-text-field>
        </v-col>
        <v-col cols="3">
          <v-text-field
            v-show="showSeconds"
            :value="splitSpan.seconds"
            ref="secondsPicker"
            @input="updateSpan()"
            :readonly="readonly"
            :disabled="disabled"
            :label="$ay.t('TimeSpanSeconds')"
            type="number"
            :data-cy="'durationseconds:' + testId"
          ></v-text-field>
        </v-col>
      </v-row>
    </template>

    <p v-show="error" class="form__error v-messages theme--light error--text">
      {{ error }}
    </p>
  </div>
</template>
<script>
/*  Xeslint-disable */

/*https://alligator.io/vuejs/add-v-model-support/
  "TimeSpanDays": "days",
  "TimeSpanHours": "hours",
  "TimeSpanMinutes": "minutes",
  "TimeSpanSeconds": "seconds", */
//example serialized json TimeSpans
//seems to be DD.HH:MM:SS.ms at it's most characters
//two colons always with an optional period at each end to separate days and ms
//we don't give a shit about MS and can safely ignore them
//so just look for a period at the top and the rest is split by colons
//maybe split by colon first then subsplit first and last elements into days and MS
//{"data":{"testTSDaysWMS":"22.10:15:22.0330000","testTSHMS":"05:16:33","testTS_DHMS":"5.10:15:33","testTS_MS":"00:15:33","testTS_S":"00:00:33","testTS_D":"22.00:00:00"}}
export default {
  props: {
    label: String,
    rules: Array,
    "error-messages": { type: Array, default: null },
    value: { type: String, default: null },
    readonly: { type: Boolean, default: false },
    disabled: { type: Boolean, default: false },
    error: {
      type: String,
      required: false
    },
    showSeconds: { type: Boolean, default: true },
    showDays: { type: Boolean, default: true },
    testId: String
  },
  computed: {
    splitSpan() {
      let vm = this;
      let theDays = 0;
      let theHours = 0;
      let theMinutes = 0;
      let theSeconds = 0;

      if (vm.value == null) {
        theDays = 0;
        theHours = 0;
        theMinutes = 0;
        theSeconds = 0;
      } else {
        let work = vm.value.split(":");
        //has days?
        if (work[0].includes(".")) {
          let dh = work[0].split(".");
          theDays = Number(dh[0]);
          theHours = Number(dh[1]);
        } else {
          theHours = Number(work[0]);
        }
        theMinutes = Number(work[1]);
        //has milliseconds? (ignore them)
        if (work[2].includes(".")) {
          let dh = work[2].split(".");
          theSeconds = Number(dh[0]);
        } else {
          theSeconds = Number(work[2]);
        }
      }

      return {
        days: theDays,
        hours: theHours,
        minutes: theMinutes,
        seconds: theSeconds
      };
    }
  },
  methods: {
    allErrors() {
      let ret = "";
      if (this.error != null) {
        ret = this.error;
      }
      if (this.errorMessages != null && this.errorMessages.length > 0) {
        ret += this.errorMessages.toString();
      }
      return ret;
    },
    updateSpan() {
      //{"data":{"testTSDaysWMS":"22.10:15:22.0330000","testTSHMS":"05:16:33","testTS_DHMS":"5.10:15:33","testTS_MS":"00:15:33","testTS_S":"00:00:33","testTS_D":"22.00:00:00"}}
      // DD.HH:MM:SS.ms
      let ret = "";
      let vm = this;
      let daysValue = this.$refs.daysPicker.$refs.input.value || 0;
      let hoursValue = this.$refs.hoursPicker.$refs.input.value || 0;
      let minutesValue = this.$refs.minutesPicker.$refs.input.value || 0;
      let secondsValue = this.$refs.secondsPicker.$refs.input.value || 0;

      if (daysValue > 0) {
        ret = `${daysValue}.`;
      }

      ret += `${hoursValue}:${minutesValue}:${secondsValue}`;
      this.$emit("input", ret);
    }
  }
};
</script>
