function _createSuper(Derived) { return function () { var Super = _getPrototypeOf(Derived), result; if (_isNativeReflectConstruct()) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }

function _possibleConstructorReturn(self, call) { if (call && (typeof call === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }

function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }

function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }

function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }

function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; subClass.__proto__ = superClass; }

var Util = require('../util');

var CatHtml = require('./cat-html');

var _require = require('../const'),
    FONT_FAMILY = _require.FONT_FAMILY;

var DomUtil = Util.DomUtil;
var LIST_CLASS = 'g2-legend-list';
var SLIP_CLASS = 'g2-slip';
var CARET_UP_CLASS = 'g2-caret-up';
var CARET_DOWN_CLASS = 'g2-caret-down';
var ENABLED_CARET_COLOR = 'rgba(0,0,0,0.65)';
var DISABLED_CARET_COLOR = 'rgba(0,0,0,0.25)';

function findNodeByClass(node, className) {
  return node.getElementsByClassName(className)[0];
}

var CatPageHtml = /*#__PURE__*/function (_CatHtml) {
  _inheritsLoose(CatPageHtml, _CatHtml);

  var _super = _createSuper(CatPageHtml);

  function CatPageHtml() {
    return _CatHtml.apply(this, arguments) || this;
  }

  var _proto = CatPageHtml.prototype;

  _proto.getDefaultCfg = function getDefaultCfg() {
    var cfg = _CatHtml.prototype.getDefaultCfg.call(this);

    return Util.mix({}, cfg, {
      /**
       * type标识
       * @type {String}
       */
      type: 'category-page-legend',

      /**
       * html 容器
       * @type {DOM}
       */
      container: null,

      /**
       * 向上 / 下翻页图标的样式
       * @type {ATTRS}
       */
      caretStyle: {
        fill: 'rgba(0,0,0,0.65)'
      },

      /**
       * 页码文字的样式
       * @type {ATTRS}
       */
      pageNumStyle: {
        display: 'inline-block',
        fontSize: '12px',
        fontFamily: FONT_FAMILY,
        cursor: 'default'
      },

      /**
       * 翻页块 DOM 的样式
       * @type {ATTRS}
       */
      slipDomStyle: {
        width: 'auto',
        height: 'auto',
        position: 'absolute'
      },

      /**
       * 翻页块 DOM
       * @type {String}
       */
      slipTpl: '<div class="' + SLIP_CLASS + '" >' + '<svg viewBox="64 64 896 896" class="g2-caret-up" data-icon="left" style = "display:inline-block;vertical-align:middle;" width="1em" height="1em" aria-hidden="true">' + '<path d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 0 0 0 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"></path>' + '</svg>' + '<p class="cur-pagenum" style = "display:inline-block;vertical-align:middle;">1</p>' + '<p class="next-pagenum" style = "display:inline-block;vertical-align:middle;"">/2</p>' + '<svg viewBox="64 64 896 896" class="g2-caret-down" data-icon="right" style = "display:inline-block;vertical-align:middle;" width="1em" height="1em" aria-hidden="true">' + '<path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z"></path>' + '</svg>' + '</div>',

      /**
       * 翻页块的宽度，用于设置翻页块相对于 legend 的位置
       * @type {Number}
       */
      slipWidth: 65,

      /**
       * legend 内容超出容器的处理方式
       * @type {String}
       */
      legendOverflow: 'unset'
    });
  };

  _proto.render = function render() {
    _CatHtml.prototype._renderHTML.call(this);

    this._renderFlipPage();
  };

  _proto._renderFlipPage = function _renderFlipPage() {
    var legendWrapper = this.get('legendWrapper'); // ul

    var itemListDom = findNodeByClass(legendWrapper, LIST_CLASS);
    var position = this.get('position');
    var layout = this.get('layout');
    var isVertical = position === 'right' || position === 'left' || layout === 'vertical';
    var itemDisplay = isVertical ? 'block' : 'inline-block';
    var legengWrapperHeight = legendWrapper.offsetHeight; // 翻页

    if (legendWrapper.scrollHeight > legengWrapperHeight) {
      // append a slip div
      var slipTpl = this.get('slipTpl');
      var slipDom = DomUtil.createDom(slipTpl);
      var caretUpDom = findNodeByClass(slipDom, CARET_UP_CLASS);
      var caretDownDom = findNodeByClass(slipDom, CARET_DOWN_CLASS);
      DomUtil.modifyCSS(caretUpDom, this.get('caretStyle'));
      DomUtil.modifyCSS(caretUpDom, {
        fill: 'rgba(0,0,0,0.25)'
      });
      DomUtil.modifyCSS(caretDownDom, this.get('caretStyle'));
      var curPageNumDom = findNodeByClass(slipDom, 'cur-pagenum');
      var totalPageNumDom = findNodeByClass(slipDom, 'next-pagenum');
      var pageNumStyle = this.get('pageNumStyle');
      DomUtil.modifyCSS(curPageNumDom, Util.mix({}, pageNumStyle, {
        paddingLeft: '10px'
      }));
      DomUtil.modifyCSS(totalPageNumDom, Util.mix({}, pageNumStyle, {
        opacity: 0.3,
        paddingRight: '10px'
      })); // layout at the center-bottom of the legendWrapper

      DomUtil.modifyCSS(slipDom, Util.mix({}, this.get('slipDomStyle'), isVertical ? {
        top: legengWrapperHeight + 'px'
      } : {
        right: 0,
        top: '50%',
        // 横向布局的时候，分页在右侧居中对齐
        transform: 'translate(0, -50%)'
      }));
      legendWrapper.style.overflow = this.get('legendOverflow');
      legendWrapper.appendChild(slipDom);

      if (!isVertical) {
        var legendListMaxWidth = Math.max(legendWrapper.offsetWidth - 10 - slipDom.offsetWidth, 0); // 横向布局的时候更新list的宽度

        DomUtil.modifyCSS(itemListDom, {
          maxWidth: legendListMaxWidth + "px"
        });
      }

      var li = itemListDom.childNodes;
      var curHeight = 0; // find the total page number

      var pages = 1;
      var blockLi = [];

      for (var i = 0; i < li.length; i++) {
        li[i].style.display = itemDisplay;
        curHeight = li[i].offsetTop + li[i].offsetHeight;

        if (curHeight > legengWrapperHeight) {
          pages++;
          blockLi.forEach(function (bl) {
            bl.style.display = 'none';
          });
          blockLi = [];
        }

        blockLi.push(li[i]);
      }

      totalPageNumDom.innerText = '/' + pages; // initialize the page

      li.forEach(function (l) {
        l.style.display = itemDisplay;
        curHeight = l.offsetTop + l.offsetHeight;

        if (curHeight > legengWrapperHeight) {
          l.style.display = 'none';
        }
      }); // 上翻事件

      caretUpDom.addEventListener('click', function () {
        // it is the 1st page
        if (li[0].style.display === itemDisplay) return; // otherwise

        var firstDisplayItemIdx = -1;
        li.forEach(function (l, i) {
          if (l.style.display === itemDisplay) {
            firstDisplayItemIdx = firstDisplayItemIdx === -1 ? i : firstDisplayItemIdx;
            l.style.display = 'none';
          }
        });

        for (var _i = firstDisplayItemIdx - 1; _i >= 0; _i--) {
          li[_i].style.display = itemDisplay;
          curHeight = li[firstDisplayItemIdx - 1].offsetTop + li[firstDisplayItemIdx - 1].offsetHeight;
          li[_i].style.display = 'none';

          if (curHeight <= legengWrapperHeight) {
            li[_i].style.display = itemDisplay;
          } else break;
        } // change the page number


        var currentPage = Number.parseInt(curPageNumDom.innerText, 10) - 1;

        if (currentPage === 1) {
          caretUpDom.style.fill = DISABLED_CARET_COLOR;
        } else {
          caretUpDom.style.fill = ENABLED_CARET_COLOR;
        }

        caretDownDom.style.fill = ENABLED_CARET_COLOR;
        curPageNumDom.innerText = currentPage;
      }); // 下翻事件

      caretDownDom.addEventListener('click', function () {
        // it is the last page
        if (li[li.length - 1].style.display === itemDisplay) return; // otherwise

        var lastDisplayItemIdx = -1;
        li.forEach(function (l, i) {
          if (l.style.display === itemDisplay) {
            lastDisplayItemIdx = i;
            l.style.display = 'none';
          }
        });

        for (var _i2 = lastDisplayItemIdx + 1; _i2 < li.length; _i2++) {
          li[_i2].style.display = itemDisplay;
          curHeight = li[_i2].offsetTop + li[_i2].offsetHeight;
          li[_i2].style.display = 'none';
          if (curHeight <= legengWrapperHeight) li[_i2].style.display = itemDisplay;else break;
        } // change the page number


        var currentPage = Number.parseInt(curPageNumDom.innerText, 10) + 1;

        if (currentPage === pages) {
          caretDownDom.style.fill = DISABLED_CARET_COLOR;
        } else {
          caretDownDom.style.fill = ENABLED_CARET_COLOR;
        }

        caretUpDom.style.fill = ENABLED_CARET_COLOR;
        curPageNumDom.innerText = currentPage;
      });
      this.set('slipDom', slipDom);
    }
  };

  _proto.destroy = function destroy() {
    var slipDom = this.get('slipDom');

    if (slipDom && slipDom.parentNode) {
      slipDom.parentNode.removeChild(slipDom);
    }

    _CatHtml.prototype.destroy.call(this);
  };

  return CatPageHtml;
}(CatHtml);

module.exports = CatPageHtml;