import { Component, Emit, Prop, Vue, Watch } from 'vue-property-decorator';
import { logService } from '@/services/logging';
import { Measure, MeasureConfig } from '@/models';
import TextMeasureConfigForm from './TextMeasureConfigForm.vue';
import moment from 'moment';

@Component({
  components: {
    TextMeasureConfigForm
  }
})
export class MeasureConfigForm extends Vue {
  @Prop({}) public value!: MeasureConfig;
  @Prop({}) public disabled: boolean = false;
  @Prop({}) public measureExists!: boolean;

  public now = moment();
  public formatStrings = [
    'l',
    'L',
    'll',
    'LL',
    'lll',
    'LLL',
    'llll',
    'LLLL',
    'Y-MM-DD',
    'Y-MM-DDTHH:mm',
    'Y-MM-DDTHH:mm:ss',
    'Y-MM-DDTHH:mm:ss.SSSZZ',
    'MM/DD',
    'MMM Do',
    'HH:mm',
    'hh:mmA'
  ];

  private selectedFormat: string = 'l';

  @Watch('value', { immediate: true, deep: true })
  @Emit('input')
  private onConfigChanged(newVal: MeasureConfig, oldVal: MeasureConfig) {
    return newVal;
  }

  private formatSelectionChanged() {
    if (this.selectedFormat !== 'custom') {
      this.value.timestampDisplayFormat = this.selectedFormat;
    }
  }

  private mounted() {
    if (this.formatStrings.includes(this.value.timestampDisplayFormat)) {
      this.selectedFormat = this.value.timestampDisplayFormat;
    } else {
      this.selectedFormat = 'custom';
    }
  }
}

export default MeasureConfigForm;