import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
import { library } from '@fortawesome/fontawesome-svg-core';
import { faSync } from '@fortawesome/free-solid-svg-icons';
import { logService } from '@/services/logging';
import { measureStore, userStore } from '@/store';
import { Measure, MeasureConfig, MeasureType } from '@/models';
import MeasureConfigForm from '@/components/measure-config/MeasureConfigForm.vue';

library.add(faSync);

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

@Component({
  components: { MeasureConfigForm }
})
export class NewMeasure extends Vue {
  private waiting = false;
  private measure: Measure<MeasureConfig> = {
    id: '',
    config: {
      type: 'simple' as MeasureType,
      isVisible: true
    },
    description: '',
    name: '',
    slug: '',
    userId: ''
  };

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

  private slugify(s: string): string {
    return s
      .toLowerCase()
      .replace(/[^\w\s\-]/g, '')
      .replace(/\s+/g, '-');
  }

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

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

}

export default NewMeasure;