import { Component, Prop, Vue } from 'vue-property-decorator';
import { library } from '@fortawesome/fontawesome-svg-core';
import { faPencilAlt } from '@fortawesome/free-solid-svg-icons';
import { faTrash } from '@fortawesome/free-solid-svg-icons';
import { Measure as MeasureModel, MeasureConfig } from '@/models';
import { measureStore, measurementStore } from '@/store';
import MeasureDetails from '@/components/measure-details/MeasureDetails.vue';

library.add(faPencilAlt);
library.add(faTrash);

@Component({
  components: {
    MeasureDetails
  }
})
export class Measure extends Vue {

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

  private get measurements() {
    if (this.measure && measurementStore.measurements[this.measure.id]) {
      return measurementStore.measurements[this.measure.id];
    } else {
      return [];
    }
  }

  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);
    }

    if (this.measure && this.measurements.length === 0) {
      await measurementStore.fetchMeasurements(this.measure);
    }
  }

}

export default Measure;