import { Component, Prop, Vue } from 'vue-property-decorator';
import { Measure, MeasureConfig, MeasureType, Measurement, MeasurementMeta } from '@/models';
import moment from 'moment';
import assign from 'lodash.assign';
import { library } from '@fortawesome/fontawesome-svg-core';
import { faPencilAlt } from '@fortawesome/free-solid-svg-icons';
import { byTimestampComparator } from '@/util';

library.add(faPencilAlt);

@Component({})
export class SimpleDetails extends Vue {
  @Prop() private measure!: Measure<MeasureConfig>;
  @Prop() private measurements!: Array<Measurement<MeasurementMeta>>;

  // private newMeasurement;
  private moment = moment;
  private chartOptions = {
    markers: { size: 6 },
    noData: { text: 'no data',
              style: { fontSize: '18px' } },
    stroke: { curve: 'straight' },
    xaxis: { type: 'datetime' }
  };

  private get measurementChartData(): ApexAxisChartSeries {
    const measurementData = this.measurements.slice() || [];

    return [{
      name: this.measure.name,
      data: measurementData
        .sort(byTimestampComparator)
        .map((m) => ({ x: m.timestamp.toISOString(), y: m.value }))
    }];
  }

  private get measurementTableData() {
    return (this.measurements || []).map((m) => {
      return assign({}, m, {
        tsDisplay: moment(m.timestamp).format('MMM Do, HH:mm'),
        tsSort: m.timestamp.toISOString()
      });
    });
  }

}

export default SimpleDetails;