import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
import { logService } from '@/services/logging';
import { measureStore, userStore } from '@/store';
import { Measure, MeasureConfig, MeasureType } from '@/models';
import MeasureConfigForm from '@/components/measure-config/MeasureConfigForm.vue';
import { slugify } from '@/util';

const logger = logService.getLogger('/views/edit-measure');

@Component({
  components: { MeasureConfigForm }
})
export class EditMeasure extends Vue {
  private waiting = false;

  private get measure(): Measure<MeasureConfig> | null {
    return measureStore.measures[this.$route.params.slug] || null;
  }

  private get slugFromName() {
    if (this.measure) {
      return slugify(this.measure.name);
    } else {
      return null;
    }
  }

  private async updateMeasure() {
    if (this.measure) {
      if (!this.measure.slug) {
        this.measure.slug = slugify(this.measure.name);
      }

      this.waiting = true;
      try {
        await measureStore.updateMeasure(this.measure);
        this.$router.push({name: 'measure', params: { slug: this.measure.slug }});
      } catch (e) {
        logger.error('Unable to update measure. \n\t' + JSON.stringify(this.measure), e.stack);
      } finally {
        this.waiting = false;
      }
    }
  }

  private async mounted() {
    // good chance we've already fetched this
    // TODO: centralize this caching behavior?
    if (!this.measure) {
      await measureStore.fetchMeasure(this.$route.params.slug);
    }
  }

}

export default EditMeasure;