<template>
  <v-row>
    <template v-if="!readonly">
      <v-col cols="6">
        <v-text-field
          ref="dateField"
          :value="splitValue.date"
          @change="updateValue()"
          :readonly="readonly"
          :disabled="disabled"
          :label="label"
          :rules="rules"
          type="date"
          :error-messages="allErrors()"
          :data-cy="!!$ay.dev ? 'dateinput:' + testId : false"
        ></v-text-field>
      </v-col>
      <v-col cols="6">
        <v-text-field
          ref="timeField"
          :value="splitValue.time"
          @change="updateValue()"
          :readonly="readonly"
          :disabled="disabled"
          type="time"
          :data-cy="!!$ay.dev ? 'timeinput:' + testId : false"
        ></v-text-field>
      </v-col>
    </template>
    <template v-else>
      <v-text-field
        :value="readonlyFormat()"
        :label="label"
        readonly
        disabled
      ></v-text-field>
    </template>
  </v-row>
</template>
<script>
//==========================================
//==========================================
export default {
  data() {
    return {
      timeZoneName: window.$gz.locale.getBrowserTimeZoneName()
    };
  },

  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
    },
    testId: String
  },
  computed: {
    splitValue() {
      return {
        date: window.$gz.locale.utcDateStringToLocal8601DateOnlyString(
          this.value,
          this.timeZoneName
        ),
        time: window.$gz.locale.utcDateStringToLocal8601TimeOnlyString(
          this.value,
          this.timeZoneName
        )
      };
    }
  },
  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;
    },
    readonlyFormat() {
      return window.$gz.locale.utcDateToShortDateAndTimeLocalized(
        this.value,
        this.timeZoneName,
        this.languageName,
        this.hour12
      );
    },
    updateValue() {
      let vm = this;
      let dateValue = vm.$refs.dateField.$refs.input.value;
      if (!dateValue) {
        let v = new Date();
        let fullYear = v.getFullYear();
        let fullMonth = v.getMonth() + 1;
        if (fullMonth < 10) {
          fullMonth = "0" + fullMonth.toString();
        }
        let fullDay = v.getDate();
        if (fullDay < 10) {
          fullDay = "0" + fullDay.toString();
        }
        dateValue = fullYear + "-" + fullMonth + "-" + fullDay;
      }

      let timeValue = vm.$refs.timeField.$refs.input.value;
      if (!timeValue) {
        timeValue = "00:00:00";
      }

      let ret = window.$gz.locale.localTimeDateStringToUTC8601String(
        dateValue + "T" + timeValue,
        vm.timeZoneName
      );
      vm.$emit("input", ret);
    }
  }
};
</script>
