import { Component, Prop, Vue } from 'vue-property-decorator';
import { Measure as MeasureModel, MeasureConfig } from '@/models';
import { measureStore, measurementStore } from '@/store';
import { logService } from '@/services/logging';

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

@Component({})
export class DeleteMeasure extends Vue {
  private waiting: boolean = false;

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

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

  private async deleteMeasure() {
    if (this.measure) {
      this.waiting = true;
      try {
        await measureStore.deleteMeasure(this.measure);
        this.$router.push({ name: 'measures' });
      } catch (e) {
        // TODO: show errors
        logger.error('Unable to delete measure. \n\t ' + JSON.stringify(this.measure), e.stack);
      } finally {
        this.waiting = false;
      }
    }
  }
}

export default DeleteMeasure;