import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
import { Measure, MeasureConfig, Measurement, MeasurementMeta, MeasureType } from '@/models';
import { library } from '@fortawesome/fontawesome-svg-core';
import { faSync } from '@fortawesome/free-solid-svg-icons';
import { logService } from '@/services/logging';
import { measureStore, measurementStore } from '@/store';
import MeasurementEntry from '@/components/measurement-entry/MeasurementEntry.vue';

library.add(faSync);

const logger = logService.getLogger('/views/new-measurement');

@Component({ components: { MeasurementEntry } })
export class NewMeasurement extends Vue {
  private get measure(): Measure<MeasureConfig> | null {
    return measureStore.measures[this.$route.params.slug] || null;
  }

  private waiting = false;
  private measurement: Measurement<MeasurementMeta> = {
    id: '',
    measureId: '',
    value: 0,
    timestamp: new Date(),
    extData: { }
  };

  private async mounted() {
    if (!this.measure) {
      await measureStore.fetchMeasure(this.$route.params.slug);
    }
  }

  private async createMeasurement() {
    this.waiting = true;
    try {
      if (this.measure) {
        // Browsers that don't support datetime-local will fallback to text.
        if (typeof(this.measurement.timestamp) === 'string') {
          this.measurement.timestamp = new Date(this.measurement.timestamp);
        }

        await measurementStore.createMeasurement({ measure: this.measure, measurement: this.measurement});
        this.$router.push({ name: 'measure', params: { slug: this.measure.slug } });
      } else { /* TODO: shouldn't be possible */ }
    } catch (e) {
      // TODO: show errors in the UI.
      logger.error('Unable to create measurement: ' + e.message + '. \n\t' + JSON.stringify(this.measurement), e.stack);
    } finally {
      this.waiting = false;
    }
  }
}

export default NewMeasurement;