import "choerodon-ui/lib/spin/style";
import _Spin from "@hzero-front-ui/c7n-ui/lib/Spin";

function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }

function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }

function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }

function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }

function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }

function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }

import React from 'react';
import ReactEchartsCore from 'echarts-for-react/lib/core';
import { observer } from 'mobx-react-lite';
import echarts from 'echarts/lib/echarts';
import { injectIntl } from 'react-intl';
import { getNear7Day, dateSplitAndPad, pickEntries } from "../util";
import 'echarts/lib/chart/line';
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';
import 'echarts/lib/component/legend';
import 'echarts/lib/component/grid';
import "./Submission.less";
import UserInfo from "../../../components/userInfo";
var LineChart = injectIntl(observer(function (props) {
  var style = props.style,
      languageType = props.languageType,
      color = props.color,
      _props$data = props.data,
      items = _props$data.items,
      count = _props$data.count,
      avatar = _props$data.avatar,
      id = _props$data.id,
      userName = _props$data.name,
      name = props.name,
      loading = props.loading,
      hasAvatar = props.hasAvatar,
      tooltip = props.tooltip,
      formatMessage = props.intl.formatMessage,
      start = props.start,
      end = props.end,
      grid = props.grid,
      legend = props.legend;

  var getOption = function getOption() {
    var _pickEntries = pickEntries(dateSplitAndPad(start, end, items)),
        keys = _pickEntries.keys,
        values = _pickEntries.values;

    var xAxis = keys && keys.length ? keys.reverse() : getNear7Day();
    var yAxis = values && values.length ? values.reverse() : [];
    return {
      title: {
        show: false
      },
      tooltip: {
        trigger: 'item',
        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(obj) {
          return "".concat(formatMessage({
            id: "".concat(languageType, ".commit.date")
          })).concat(obj.name, "<br/>").concat(formatMessage({
            id: "".concat(languageType, ".commit.count")
          })).concat(obj.value);
        }
      },
      legend: {
        show: legend,
        left: 'right',
        itemWidth: 14,
        itemGap: 20,
        formatter: function formatter(nameCurrent) {
          // 在series中必须有对应的name，否则不显示
          return "".concat(nameCurrent, "\uFF1A").concat(count || 0);
        },
        selectedMode: false
      },
      grid: {
        top: grid[0],
        left: grid[1],
        right: grid[2],
        bottom: grid[3],
        // 防止标签溢出
        containLabel: true
      },
      xAxis: {
        boundaryGap: false,
        axisTick: {
          show: false
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: '#eee'
          },
          onZero: true
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: ['#eee']
          }
        },
        axisLabel: {
          color: 'rgba(0,0,0,0.65)',
          formatter: function formatter(item, idx) {
            return item.split('-').slice(1).join('/');
          }
        },
        data: xAxis
      },
      yAxis: {
        name: formatMessage({
          id: "".concat(languageType, ".commit.num")
        }),
        min: Math.max.apply(Math, _toConsumableArray(yAxis)) > 3 ? null : 0,
        max: Math.max.apply(Math, _toConsumableArray(yAxis)) > 3 ? null : 4,
        minInterval: 1,
        nameTextStyle: {
          color: '#000'
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: '#eee'
          }
        },
        axisTick: {
          show: false
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: ['#eee']
          }
        },
        axisLabel: {
          color: 'rgba(0,0,0,0.65)'
        },
        type: 'value'
      },
      series: [{
        data: yAxis,
        type: 'line',
        smooth: true,
        smoothMonotone: 'x',
        symbol: 'circle',
        itemStyle: {
          normal: {
            color: color
          }
        },
        areaStyle: {
          color: color,
          opacity: '0.5'
        },
        lineStyle: {
          color: color
        }
      }, {
        name: "".concat(formatMessage({
          id: "".concat(languageType, ".devops.total")
        })),
        type: 'line',
        color: '#fff'
      }]
    };
  };

  return /*#__PURE__*/React.createElement(_Spin, {
    spinning: loading
  }, tooltip ? /*#__PURE__*/React.createElement("div", {
    className: "c7n-report-commits-title"
  }, /*#__PURE__*/React.createElement(UserInfo, {
    name: name || '?',
    avatar: avatar,
    size: "large",
    showTooltip: false
  }), count ? /*#__PURE__*/React.createElement("span", {
    className: "c7n-report-commits-text"
  }, count, " commits") : null) : null, /*#__PURE__*/React.createElement(ReactEchartsCore, {
    echarts: echarts,
    option: getOption(),
    style: style,
    notMerge: true,
    lazyUpdate: true
  }));
}));
LineChart.defaultProps = {
  grid: [42, 14, 20, 0],
  tooltip: true,
  legend: false,
  languageType: 'report'
};
export default LineChart;