<template>
  <div>
    <v-row row wrap v-if="!readonly">
      <v-col cols="12">
        <v-dialog v-model="dlgtime" persistent width="290px">
          <template v-slot:activator="{ on }">
            <v-text-field
              v-on="on"
              v-model="formatTime"
              v-bind:label="label"
              prepend-icon="fa-clock"
              @click:prepend="dlgtime = true"
              readonly
              :error="!!error"
            ></v-text-field>
          </template>
          <v-time-picker scrollable ampm-in-title v-model="timeOnly">
            <v-spacer></v-spacer>
            <v-btn text color="primary" @click="dlgtime = false">OK</v-btn>
          </v-time-picker>
        </v-dialog>
      </v-col>
    </v-row>
    <v-text-field
      v-if="readonly"
      v-model="formatDateTime"
      v-bind:label="label"
      prepend-icon="fa-calendar-alt"
      disabled
    ></v-text-field>
    <p v-show="error" class="form__error v-messages theme--light error--text">
      {{ error }}
    </p>
  </div>
</template>
<script>
/*  Xeslint-disable */
//******************************** NOTE: this control also captures the date even though it's time only, this is an intentional design decision to support field change to date or date AND time and is considered a display issue */
export default {
  beforeCreate() {
    //debugger;
    //this is a nothing line as a test
    //check pre-requisites exist just in case
    if (window.$gz.errorHandler.devMode()) {
      if (!window.$gz.dayjs) {
        throw "DateTimeControl: the DayJS library is required and missing";
      }
      if (!window.$gz.locale) {
        throw "DateTimeControl: $gz.locale is required and missing";
      }
    }
  },
  data: () => ({ date: null, oldDate: null, dlgtime: false }),
  props: {
    label: String,
    rules: Array,
    value: String,
    readonly: { type: Boolean, default: false },
    error: {
      type: String,
      required: false
    }
  },
  watch: {
    date() {
      //this tortuous fuckery is required so that the input and change events only fire on a real change, not initial page load
      //also it shouldn't signal a change if the values are the same and nothing was effectively changed
      var hasChanged = false;
      if (this.oldDate != null && this.date != this.oldDate) {
        hasChanged = true;
      }
      this.oldDate = this.date;
      if (hasChanged) {
        this.$emit("input", this.date); //always in UTC
        this.$emit("change", this.date); //always in UTC
      }
    },
    value() {
      this.date = this.value; //always in UTC
    }
  },
  computed: {
    formatDateTime() {
      return this.value
        ? window.$gz.dayjs
            .utc(this.value)
            .add(window.$gz.locale.format().timeZoneOffset, "hour")
            .format(window.$gz.locale.format().shortDateAndTime)
        : "";
    },
    formatDate() {
      return this.value
        ? window.$gz.dayjs
            .utc(this.value)
            .add(window.$gz.locale.format().timeZoneOffset, "hour")
            .format(window.$gz.locale.format().shortDate)
        : "";
    },
    formatTime() {
      return this.value
        ? window.$gz.dayjs
            .utc(this.value)
            .add(window.$gz.locale.format().timeZoneOffset, "hour")
            .format(window.$gz.locale.format().shortTime)
        : "";
    },
    dateOnly: {
      get() {
        //TODO: this will likely need an improvement for forms where there should be an automatic pre-set time chosen like workorder labor;
        var defaultDateString = window.$gz
          .dayjs()
          .utc()
          .add(window.$gz.locale.format().timeZoneOffset, "hour")
          .format("YYYY-MM-DD");

        return this.value
          ? window.$gz.dayjs
              .utc(this.value)
              .add(window.$gz.locale.format().timeZoneOffset, "hour")
              .format("YYYY-MM-DD")
          : defaultDateString;
      },
      set(value) {
        this.date = window.$gz.dayjs
          .utc(value + " " + this.timeOnly)
          .subtract(window.$gz.locale.format().timeZoneOffset, "hour")
          .toISOString();
      }
    },
    timeOnly: {
      get() {
        //TODO: this will likely need an improvement for forms where there should be an automatic pre-set time chosen like workorder labor;
        var defaultTimeString = window.$gz.dayjs
          .utc()
          .add(window.$gz.locale.format().timeZoneOffset, "hour")
          .format("HH:mm:ss");

        return this.value
          ? window.$gz.dayjs
              .utc(this.value)
              .add(window.$gz.locale.format().timeZoneOffset, "hour")
              .format("HH:mm:ss")
          : defaultTimeString;
      },
      set(value) {
        this.date = window.$gz.dayjs
          .utc(this.dateOnly + " " + value)
          .subtract(window.$gz.locale.format().timeZoneOffset, "hour")
          .toISOString();
      }
    }
  }
};
</script>

//
<!--

// NOTE: this component was created based on a reddit query and answer below.
// Note also that the date and time coming in to this component are expected to be an ISO8601 format date and time string in UTC
// and it's kept in UTC and only localized temporarily for display and selection and update after selection in the date and time picker components

// re: combined date/time component

// from theRetrograde sent 4 hours ago

// We are using this in a dynamic form that will display a textbox, when the user clicks the textbox a modal opens to show the pickers. 
// I'm not sure why it wouldn't be rendering initially.
// Here are the props we pass to the component, maybe this will help:

// <template v-else-if="get_field_type(key) == 'datetime'">
//                     <AppDateTimePicker 
//                       v-model="editedItem[key]"
//                       v-bind:key="key"
//                       v-bind:readonly="is_readonly(key)"
//                       v-bind:label="pretty_field(key)">
//                     </AppDateTimePicker>
//              </template>


// <template>
//   <div>
//     <v-layout row wrap v-if="!readonly">
//       <v-flex xs6>
//         <v-dialog v-model="modal" persistent lazy full-width width="290px">
//           <v-text-field
//             slot="activator"
//             v-model="formatDate"
//             v-bind:label="label"
//             prepend-icon="event"
//             readonly
//           ></v-text-field>
//           <v-date-picker v-model="dateOnly" @input="modal = false">
//             <v-spacer></v-spacer>
//             <v-btn flat color="primary" @click="modal = false">Close</v-btn>
//           </v-date-picker>
//         </v-dialog>
//       </v-flex>
//       <v-flex xs6>
//         <v-dialog v-model="modal2" persistent lazy full-width width="290px">
//           <v-text-field
//             slot="activator"
//             v-model="formatTime"
//             label
//             prepend-icon="access_time"
//             readonly
//           ></v-text-field>
//           <v-time-picker v-model="timeOnly">
//             <v-spacer></v-spacer>
//             <v-btn flat color="primary" @click="modal2 = false">OK</v-btn>
//           </v-time-picker>
//         </v-dialog>
//       </v-flex>
//     </v-layout>
//     <v-text-field
//       v-else
//       v-model="formatDateTime"
//       v-bind:label="label"
//       prepend-icon="event"
//       disabled
//     ></v-text-field>
//   </div>
// </template> 

// // <script>
// // export default {
// //   data: () => ({ date: null, modal: false, modal2: false }),
// //   props: { label: String, value: String, readonly: Boolean },
// //   watch: {
// //     date() {
// //       this.$emit("input", this.date);
// //     },
// //     value() {
// //       this.date = this.value;
// //     }
// //   },
// //   computed: {
// //     formatDateTime() {
// //       let momentObj = this.$moment.utc();
// //       if (this.value) {
// //         momentObj = this.$moment.utc(this.value);
// //       }
// //       return momentObj.local().format("dddd MM/DD/YYYY h:mm a");
// //     },
// //     formatDate() {
// //       let momentObj = this.$moment.utc();
// //       if (this.value) {
// //         momentObj = this.$moment.utc(this.value);
// //       }
// //       return momentObj.local().format("dddd MM/DD/YYYY");
// //     },
// //     dateOnly: {
// //       get() {
// //         let momentObj = this.$moment.utc();
// //         if (this.value) {
// //           momentObj = this.$moment.utc(this.value);
// //         }
// //         return momentObj.local().format("YYYY-MM-DD");
// //       },
// //       set(value) {
// //         this.date = value + " " + this.timeOnly;
// //       }
// //     },
// //     timeOnly: {
// //       get() {
// //         let momentObj = this.$moment.utc();
// //         if (this.value) {
// //           momentObj = this.$moment.utc(this.value);
// //         }
// //         return momentObj.local().format("HH:mm:ss");
// //       },
// //       set(value) {
// //         this.date = this.dateOnly + " " + value;
// //       }
// //     },
// //     formatTime() {
// //       let momentObj = this.$moment.utc();
// //       if (this.value) {
// //         momentObj = this.$moment.utc(this.value);
// //       }
// //       return momentObj.local().format("h:mm a");
// //     }
// //   }
// // };
// // </script>
// -->
