<template>
  <v-card class="v-card-fluid">
    <v-card-title>
      <span class="headline">Event Severity Timeseries</span>
    </v-card-title>
    <timeseries-chart ref="ts-chart" />
  </v-card>
</template>

<script lang="ts">
import { Component, Vue, Watch, Prop, Ref } from 'vue-property-decorator';
import TimeseriesChart from 'dasf-web/lib/charts/TimeseriesChart.vue';
import {
  RenderStyle,
  YAxis
} from 'dasf-web/lib/charts/D3ChartConfig';
// import { Timeseries } from 'dasf-web/lib/model/Timeseries';
import {
  userSetting,
  WorkflowSettingsObserver
} from 'dasf-web/lib/model/UserSetting';
import { ChangeWorkflowSettings } from './model/ChangeWorkflowSettings';
import DateRange from 'dasf-web/lib/dateSelection/daterangepicker/DateRange';

const VERSION: number[] = [0, 0, 1];
const NAME = 'EventSeverityTimeseriesChart';

@Component({ components: { TimeseriesChart } })
export default class EventSeverityTimeseriesChart extends Vue
  implements WorkflowSettingsObserver {
  name = NAME;
  @Prop({ type: String, required: true }) workflowName!: string;
  @Prop({ type: DateRange, required: true }) dateRangeModel!: DateRange;

  @Ref('ts-chart') readonly chart!: TimeseriesChart;

  protected mounted() {
    console.log(
      'mounted: ' +
        this.toString() +
        ' within ' +
        this.workflowName +
        ' workflow.'
    );
    let wfSet: ChangeWorkflowSettings = userSetting.getWorkflowSettings(
      this.workflowName
    ) as ChangeWorkflowSettings;
    wfSet.addListener(this);
  }

  @Watch('dateRangeModel.selectedMinDate')
  @Watch('dateRangeModel.selectedMaxDate')
  dateRangeUpdate(): void {
    // update the chart
    this.chart.dateRangeUpdate(
      this.dateRangeModel.selectedMinDate,
      this.dateRangeModel.selectedMaxDate
    );
  }

  settingsUpdate(type: string) {
    switch (type) {
      case ChangeWorkflowSettings.EVENT_TIMESERIES_UPDATED:
        var wfSet = userSetting.getWorkflowSettings(
          this.workflowName
        ) as ChangeWorkflowSettings;
        this.chart.clearHandlers();
        var dateRange = wfSet.dateRange;
        this.chart.dateRangeUpdate(
          dateRange.selectedMinDate,
          dateRange.selectedMaxDate
        );
        this.chart.clearTimeseries();
        this.chart.addTimeseries(
          YAxis.left,
          RenderStyle.bar,
          'steelblue',
          wfSet.eventTimeseries.header.name,
          wfSet.eventTimeseries
        );
        break;
    }
  }

  public toString(): string {
    return NAME + ' V' + VERSION.join('.');
  }
}
</script>