/* eslint-disable max-len */
import ReactEcharts from 'echarts-for-react';
import React from 'react';
import map from 'lodash/map';
import reduce from 'lodash/reduce';
import { useReportsStore } from "../../../stores";
import Loading from "../../../../../components/loading";
import { observer } from 'mobx-react-lite';
import { usePipelineTriggerNumberStore } from "../../stores";
import mapings from "../../stores/mappings";
import { getAxis } from "../../../util";

var Chart = function Chart(props) {
  var _usePipelineTriggerNu = usePipelineTriggerNumberStore(),
      formatMessage = _usePipelineTriggerNu.intl.formatMessage,
      history = _usePipelineTriggerNu.history,
      _usePipelineTriggerNu2 = _usePipelineTriggerNu.history.location,
      state = _usePipelineTriggerNu2.state,
      search = _usePipelineTriggerNu2.search,
      prefixCls = _usePipelineTriggerNu.prefixCls,
      pipelineChartDs = _usePipelineTriggerNu.pipelineChartDs;

  var _useReportsStore = useReportsStore(),
      ReportsStore = _useReportsStore.ReportsStore;

  var startTime = ReportsStore.getStartTime;
  var endTime = ReportsStore.getEndTime;

  var getVal = function getVal(pipelineFailFrequency, pipelineSuccessFrequency) {
    return [{
      name: "".concat(formatMessage({
        id: 'report.pipelineTrigger-number.fail'
      })),
      value: reduce(pipelineFailFrequency, function (sum, n) {
        return sum + n;
      }, 0)
    }, {
      name: "".concat(formatMessage({
        id: 'report.pipelineTrigger-number.success'
      })),
      value: reduce(pipelineSuccessFrequency, function (sum, n) {
        return sum + n;
      }, 0)
    }];
  };

  var getTooltip = function getTooltip() {
    return {
      trigger: 'axis',
      axisPointer: {
        type: 'none'
      },
      backgroundColor: 'rgba(0,0,0,0.75)',
      textStyle: {
        color: '#fff'
      },
      extraCssText: '0px 2px 8px 0px rgba(0,0,0,0.12);padding:15px 17px',
      formatter: function formatter(params) {
        if (params[0].value || params[1].value) {
          return "<div>\n          <div>\u65F6\u95F4\uFF1A".concat(params[1].name, "</div>\n          <div><span class=\"c7ncd-echarts-tooltip\" style=\"background-color:").concat(params[0].color, ";\"></span>").concat(formatMessage({
            id: 'report.pipelineTrigger-number.build'
          })).concat(params[0].seriesName, "\uFF1A").concat(params[0].value, "</div>\n          <div><span class=\"c7ncd-echarts-tooltip\" style=\"background-color:").concat(params[1].color, ";\"></span>").concat(formatMessage({
            id: 'report.pipelineTrigger-number.build'
          })).concat(params[1].seriesName, "\uFF1A").concat(params[1].value, "</div>\n        <div>");
        }

        return null;
      }
    };
  };

  var getGrid = function getGrid() {
    return {
      left: '2%',
      right: '3%',
      bottom: '3%',
      top: '15%',
      containLabel: true
    };
  };

  var getLegend = function getLegend(pipelineSuccessFrequency, pipelineFailFrequency) {
    return {
      left: 'right',
      itemWidth: 14,
      itemGap: 20,
      padding: [0, 5, 5, 5],
      formatter: function formatter(name) {
        var count = 0;
        map(getVal(pipelineFailFrequency, pipelineSuccessFrequency), function (data) {
          if (data.name === name) {
            count = data.value;
          }
        });
        return "".concat(name, "\uFF1A").concat(count);
      },
      selectedMode: false
    };
  };

  var getSeries = function getSeries(yAxis) {
    return [{
      name: "".concat(formatMessage({
        id: 'report.pipelineTrigger-number.success'
      })),
      type: 'bar',
      barWidth: '16px',
      itemStyle: {
        color: '#00BFA5',
        emphasis: {
          shadowBlur: 10,
          shadowColor: 'rgba(0,0,0,0.20)'
        }
      },
      stack: 'success',
      data: yAxis.pipelineSuccessFrequency
    }, {
      name: "".concat(formatMessage({
        id: 'report.pipelineTrigger-number.fail'
      })),
      type: 'bar',
      barWidth: '16px',
      itemStyle: {
        color: '#FD729C',
        emphasis: {
          shadowBlur: 10,
          shadowColor: 'rgba(0,0,0,0.20)'
        }
      },
      stack: 'fail',
      data: yAxis.pipelineFailFrequency
    }];
  };

  var getYAxis = function getYAxis(yAxis) {
    return {
      name: "".concat(formatMessage({
        id: 'report.pipelineTrigger-number.yAxis'
      })),
      type: 'value',
      nameTextStyle: {
        fontSize: 13,
        color: '#000',
        padding: [0, 5, 2, 5]
      },
      axisTick: {
        show: false
      },
      axisLine: {
        lineStyle: {
          color: '#eee',
          type: 'solid',
          width: 2
        }
      },
      axisLabel: {
        textStyle: {
          color: 'rgba(0, 0, 0, 0.65)',
          fontSize: 12
        }
      },
      splitLine: {
        lineStyle: {
          color: '#eee',
          type: 'solid',
          width: 1
        }
      },
      min: yAxis.pipelineFrequencys && yAxis.pipelineFrequencys.length ? null : 0,
      max: yAxis.pipelineFrequencys && yAxis.pipelineFrequencys.length ? null : 4
    };
  };

  var getXAxis = function getXAxis(xAxis) {
    return {
      type: 'category',
      axisTick: {
        show: false
      },
      axisLine: {
        lineStyle: {
          color: '#eee',
          type: 'solid',
          width: 2
        }
      },
      axisLabel: {
        margin: 13,
        textStyle: {
          color: 'rgba(0, 0, 0, 0.65)',
          fontSize: 12
        },
        formatter: function formatter(value) {
          return "".concat(value.substr(5).replace('-', '/'));
        }
      },
      splitLine: {
        lineStyle: {
          color: ['#eee'],
          width: 1,
          type: 'solid'
        }
      },
      data: xAxis
    };
  };

  var getOpts = function getOpts() {
    var _ref = pipelineChartDs.current ? pipelineChartDs.current.toData() : {},
        createDates = _ref.createDates,
        pipelineFrequencys = _ref.pipelineFrequencys,
        pipelineSuccessFrequency = _ref.pipelineSuccessFrequency,
        pipelineFailFrequency = _ref.pipelineFailFrequency;

    var _getAxis = getAxis(startTime, endTime, createDates || [], {
      pipelineFailFrequency: pipelineFailFrequency,
      pipelineSuccessFrequency: pipelineSuccessFrequency,
      pipelineFrequencys: pipelineFrequencys
    }),
        xAxis = _getAxis.xAxis,
        yAxis = _getAxis.yAxis;

    var option = {
      legend: getLegend(pipelineSuccessFrequency, pipelineFailFrequency),
      tooltip: getTooltip(),
      xAxis: getXAxis(xAxis),
      yAxis: getYAxis(yAxis),
      grid: getGrid(),
      series: getSeries(yAxis)
    };
    return option;
  };

  if (pipelineChartDs.status === 'loading') {
    return /*#__PURE__*/React.createElement(Loading, {
      display: true
    });
  }

  return /*#__PURE__*/React.createElement(ReactEcharts, {
    option: getOpts()
  });
};

export default observer(Chart);