import merge from 'lodash/merge';
import isNil from 'lodash/isNil';
import { graphic } from 'echarts';
import { GlResizeObserverDirective } from '../../../directives/resize_observer/resize_observer';
import { defaultChartOptions, mergeSeriesToOptions, symbolSize } from '../../../utils/charts/config';
import { HEIGHT_AUTO_HORIZONTAL_LAYOUT_CLASSES } from '../../../utils/charts/constants';
import Chart from '../chart/chart';
import ChartTooltip from '../tooltip/tooltip';
import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';

//

// the padding is needed so the mark points don't overflow when visible
const gridPadding = symbolSize / 2;
const generateGradient = colors => {
  return new graphic.LinearGradient(0, 0, 0, 1, colors.map((color, index) => {
    const offset = index / (colors.length - 1);
    return {
      offset,
      color
    };
  }));
};
var script = {
  name: 'GlSparklineChart',
  components: {
    Chart,
    ChartTooltip
  },
  directives: {
    resizeObserver: GlResizeObserverDirective
  },
  props: {
    /**
     * The data that is used to plot the chart.
     */
    data: {
      type: Array,
      required: true
    },
    /**
     * Controls the label that is shown within the chart's tooltip. Use it to describe your data.
     */
    tooltipLabel: {
      type: String,
      required: false,
      default: ''
    },
    /**
     * Sets the chart's height in pixels. Set to `"auto"` to use the height of the container.
     */
    height: {
      type: [Number, String],
      required: false,
      default: 50
    },
    /**
     * If enabled will show the value of the latest "y" data-point on the side right of the chart.
     */
    showLastYValue: {
      type: Boolean,
      required: false,
      default: true
    },
    /**
     * Sets a colour gradient for the sparkline
     */
    gradient: {
      type: Array,
      required: false,
      default: () => []
    },
    /**
     * The smoothness of the line, valued from 0 to 1. A smaller value makes it less smooth.
     */
    smooth: {
      type: Number,
      required: false,
      default: 0,
      validator: x => x >= 0 && x <= 1
    },
    /**
     * Whether to connect the line across null points.
     */
    connectNulls: {
      type: Boolean,
      required: false,
      default: false
    }
  },
  data() {
    return {
      chartInstance: null,
      tooltip: {
        show: false,
        title: '',
        content: '',
        position: {
          left: '0',
          top: '0'
        }
      }
    };
  },
  computed: {
    options() {
      const sparkLineChartOptions = {
        grid: {
          top: gridPadding,
          bottom: gridPadding,
          left: gridPadding,
          right: gridPadding
        },
        xAxis: {
          type: 'category',
          show: false,
          axisLabel: {
            show: true
          },
          axisPointer: {
            show: true,
            type: 'none',
            label: {
              formatter: this.generateTooltip
            }
          }
        },
        yAxis: {
          type: 'value',
          show: false,
          min: 'datamin'
        }
      };
      const mergedOptions = merge({}, defaultChartOptions, sparkLineChartOptions);
      return mergeSeriesToOptions(mergedOptions, this.series);
    },
    willShowLastYValue() {
      return this.showLastYValue && this.data.length;
    },
    series() {
      const {
        data,
        smooth,
        itemStyle,
        willShowLastYValue,
        connectNulls
      } = this;
      const markPoint = willShowLastYValue ? {
        symbol: 'circle',
        cursor: 'auto',
        animation: false,
        symbolSize,
        data: [{
          xAxis: data.length - 1,
          yAxis: data[data.length - 1][1]
        }]
      } : undefined;
      return {
        type: 'line',
        symbol: 'circle',
        animation: true,
        cursor: 'auto',
        symbolSize,
        markPoint,
        data,
        smooth,
        itemStyle,
        lineStyle: {
          cap: 'round'
        },
        connectNulls
      };
    },
    itemStyle() {
      if (this.applyGradient) {
        return {
          color: generateGradient(this.gradient)
        };
      }
      if (this.gradient.length) {
        // If the gradient cannot be used, then apply
        // the first colour to the entire line.
        return {
          color: this.gradient[0]
        };
      }
      return {};
    },
    applyGradient() {
      if (this.gradient.length && this.data.length) {
        // Applying a gradient a constant line will cause it to not render,
        // so skip the gradient if all values are equal.
        const [, firstValue] = this.data[0];
        return this.data.some(_ref => {
          let [, value] = _ref;
          return firstValue !== value;
        });
      }
      return false;
    },
    lastYValue() {
      if (!this.willShowLastYValue) return undefined;
      const latestEntry = this.data.slice(-1)[0];
      return latestEntry[1];
    },
    autoHeight() {
      return this.height === 'auto';
    }
  },
  methods: {
    onChartCreated(chartInstance) {
      this.chartInstance = chartInstance;
      this.tooltip.show = false;

      /**
       * Emitted when the chart is created.
       * The payload contains the echarts instance.
       * @event chartCreated
       * @type {object}
       */
      this.$emit('chartCreated', chartInstance);
    },
    handleResize() {
      this.chartInstance.resize();
    },
    isNilOrBlank(text) {
      return isNil(text) || typeof text === 'string' && text.trim() === '';
    },
    setTooltipPosition(data) {
      const [left, top] = this.chartInstance.convertToPixel('grid', data);
      this.tooltip.position = {
        left: `${left}px`,
        top: `${top}px`
      };
    },
    // This function is called any time the axis pointer is changed (the black bubble showing which
    // point on the line is selected). Note that it will not trigger if the axis pointer is removed,
    // only when it changes from one point to another or is shown for the first time.
    generateTooltip(_ref2) {
      let {
        seriesData = []
      } = _ref2;
      this.tooltip.show = false;

      // seriesData is an array of nearby data point coordinates
      // seriesData[0] is the nearest point at which the tooltip is displayed
      // https://echarts.apache.org/en/option.html#xAxis.axisPointer.label.formatter
      const [firstEntry = {}] = seriesData;
      const {
        data
      } = firstEntry;
      if (!data) return;
      const [title, content] = data;
      if (this.isNilOrBlank(title) || this.isNilOrBlank(content)) return;
      this.tooltip.title = title;
      this.tooltip.content = content;
      this.setTooltipPosition(data);
      this.tooltip.show = null;
    }
  },
  HEIGHT_AUTO_HORIZONTAL_LAYOUT_CLASSES
};

/* script */
const __vue_script__ = script;

/* template */
var __vue_render__ = function () {
var _obj;
var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{directives:[{name:"resize-observer",rawName:"v-resize-observer",value:(_vm.handleResize),expression:"handleResize"}],staticClass:"gl-flex gl-items-center",class:{ 'gl-h-full': _vm.autoHeight }},[_vm._t("default"),_vm._v(" "),_c('div',{staticClass:"gl-relative gl-grow",class:( _obj = {}, _obj[_vm.$options.HEIGHT_AUTO_HORIZONTAL_LAYOUT_CLASSES] = _vm.autoHeight, _obj ),attrs:{"data-testid":"chart-container"}},[_c('chart',_vm._g(_vm._b({class:{ 'gl-grow': _vm.autoHeight },attrs:{"height":_vm.height,"options":_vm.options},on:{"created":_vm.onChartCreated}},'chart',_vm.$attrs,false),_vm.$listeners)),_vm._v(" "),(_vm.chartInstance)?_c('chart-tooltip',{attrs:{"show":_vm.tooltip.show,"chart":_vm.chartInstance,"top":_vm.tooltip.position.top,"left":_vm.tooltip.position.left,"placement":"top"},scopedSlots:_vm._u([{key:"title",fn:function(){return [_c('div',{staticClass:"gl-whitespace-nowrap",attrs:{"data-testid":"tooltip-title"}},[_vm._v("\n          "+_vm._s(_vm.tooltip.title)+"\n        ")])]},proxy:true},{key:"default",fn:function(){return [_c('div',{staticClass:"gl-flex",attrs:{"data-testid":"tooltip-content"}},[(_vm.tooltipLabel)?_c('span',{staticClass:"gl-mr-auto gl-pr-6"},[_vm._v(_vm._s(_vm.tooltipLabel))]):_vm._e(),_vm._v(" "),_c('strong',[_vm._v(_vm._s(_vm.tooltip.content))])])]},proxy:true}],null,false,4012348801)}):_vm._e()],1),_vm._v(" "),(_vm.showLastYValue)?_c('span',{staticClass:"gl-ml-5 gl-inline-flex gl-justify-center",attrs:{"data-testid":"last-y-value"}},[_vm._v("\n    "+_vm._s(_vm.lastYValue)+"\n  ")]):_vm._e()],2)};
var __vue_staticRenderFns__ = [];

  /* style */
  const __vue_inject_styles__ = undefined;
  /* scoped */
  const __vue_scope_id__ = undefined;
  /* module identifier */
  const __vue_module_identifier__ = undefined;
  /* functional template */
  const __vue_is_functional_template__ = false;
  /* style inject */
  
  /* style inject SSR */
  
  /* style inject shadow dom */
  

  
  const __vue_component__ = __vue_normalize__(
    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
    __vue_inject_styles__,
    __vue_script__,
    __vue_scope_id__,
    __vue_is_functional_template__,
    __vue_module_identifier__,
    false,
    undefined,
    undefined,
    undefined
  );

export default __vue_component__;
