import has from 'lodash/has';

export default {
  props: {
    id: {
      type: String,
      required: true
    },
    series: {
      type: Array,
      required: false,
      default: function() { return []; }
    },
    options: {
      type: Object,
      required: false,
      default: function() { return {}; }
    }
  },
  watch: {
    id() {
      this.renderChart();
    },
    series() {
      this.renderChart();
    },
    options() {
      this.renderChart();
    }
  },
  mounted() {
    this.renderChart();
  },
  destroyed() {
    if(this.pod) {
      this.pod.removeEventListeners();
    }
    this.pod = undefined;
  },
  methods: {
    // it's "abstract" method. "children" components should override it
    render() { },
    renderSharedCrosshair(values: { x?: number, y?: number }) { },
    hideSharedCrosshair() { },
    onPanningRescale(event) {
      this.pod.rescaleMetricAndAxis(event);
    },
    renderChart() {
      this.appendEvents();
      this.render();
    },
    appendEvents() {
      if(this.options.events === undefined) {
        if(this.options.eventsCallbacks !== undefined) {
          this.options.events = this.options.eventsCallbacks
        } else {
          this.options.events = {};
        }
      }
      if(has(this.$listeners, 'zoomIn')) {
        this.options.events.zoomIn = this.zoomIn.bind(this);
      }
      if(has(this.$listeners, 'zoomOut')) {
        this.options.events.zoomOut = this.zoomOut.bind(this);
      }
      if(has(this.$listeners, 'mouseMove')) {
        this.options.events.mouseMove = this.mouseMove.bind(this);
      }
      if(has(this.$listeners, 'mouseOut')) {
        this.options.events.mouseOut = this.mouseOut.bind(this);
      }
      if(has(this.$listeners, 'onLegendClick')) {
        this.options.events.onLegendClick = this.onLegendClick.bind(this);
      }
      if(has(this.$listeners, 'panningEnd')) {
        this.options.events.panningEnd = this.panningEnd.bind(this);
      }
      if(has(this.$listeners, 'panning')) {
        this.options.events.panning = this.panning.bind(this);
      }
      if(has(this.$listeners, 'contextMenu')) {
        this.options.events.contextMenu = this.contextMenu.bind(this);
      }
      if(has(this.$listeners, 'sharedCrosshairMove')) {
        this.options.events.sharedCrosshairMove = this.sharedCrosshairMove.bind(this);
      }
      if(has(this.$listeners, 'renderStart')) {
        this.options.events.renderStart = this.renderStart.bind(this);
      }
      if(has(this.$listeners, 'renderEnd')) {
        this.options.events.renderEnd = this.renderEnd.bind(this);
      }
    },
    zoomIn(range) {
      this.$emit('zoomIn', range);
    },
    zoomOut(centers) {
      this.$emit('zoomOut', centers);
    },
    mouseMove(evt) {
      this.$emit('mouseMove', evt);
    },
    mouseOut() {
      this.$emit('mouseOut');
    },
    onLegendClick(idx) {
      this.$emit('onLegendClick', idx);
    },
    panningEnd(range) {
      this.$emit('panningEnd', range);
    },
    panning(range) {
      this.$emit('panning', range);
    },
    contextMenu(evt) {
      this.$emit('contextMenu', evt);
    },
    sharedCrosshairMove(event) {
      this.$emit('sharedCrosshairMove', event);
    },
    renderStart() {
      this.$emit('renderStart');
    },
    renderEnd() {
      this.$emit('renderEnd');
    },
  }
};