import template from "./Pagination.html";

  import style from "antd/lib/pagination/style/index.css";

  
  class Pagination {

      useModules = ["esNgAntd"];
  

      template = template;
  
      props = {
          defaultCurrent: Number,
          current: Number,
          total: Number,
          defaultPageSize: Number,
          pageSize: Number,
          onChange: Function,
          onShowSizeChange: Function,
          showQuickJumper: Boolean,
          showSizeChanger: Boolean,

          size: String,

          showTotal: Function,

      };
  
      state = {
          total: null,
          current: null,
          pageSize: null,
          pageNum: null,
          pageNumList: null,

          defaultPageSize: this.props.defaultPageSize || 10

      };
  

      watch = {
          total: function (newVal, oldVal) {
              if (newVal && oldVal) {
                  this.state.total = Number(newVal);
                  this.state.pageNum = this.getPageNum();
                  this.state.pageNumList = this.getPageNumList();
              }
          }
      }
  

      constructor() {

          esNgAntd.createStyle("ant-pagination", style);

          this.state.total = Number(this.props.total || 0);

          this.state.current = Number(
              this.props.current || this.props.defaultCurrent || 1
          );
          this.state.pageSize =
              this.props.pageSize || this.props.defaultPageSize || 10;

          this.state.pageNum = this.getPageNum();

          this.state.pageNumList = this.getPageNumList();
      }
  

      handleShowTotal() {
          return this.props.showTotal({
              total: this.state.total
          })
      }
  

      getItemLinkClassName(value) {
          if (typeof value === "number") {
              return (
                  "ant-pagination-item" +
                  (this.state.current === value
                      ? " ant-pagination-item-active"
                      : "")
              );
          } else {
              return "ant-pagination-jump-next ant-pagination-jump-next-custom-icon";
          }
      }
  
      getPageNumList() {
          let pageNumList = [this.state.current];
          let pageNum = this.getPageNum();
          if (pageNum <= 7 || this.state.current - 1 < 4) {
              for (let i = this.state.current - 1; i > 0; i--) {
                  pageNumList.unshift(i);
              }
          } else {
              let len = this.state.current - 1 > 2 ? 2 : this.state.current - 1;
              for (let i = 1; i <= len; i++) {
                  pageNumList.unshift(this.state.current - i);
              }
              if (this.state.current - 2 > 2) {
                  pageNumList.unshift("prev");
                  pageNumList.unshift(1);
              }
          }
  
          if (pageNum <= 7 || pageNum - this.state.current < 4) {
              for (let i = this.state.current + 1; i <= pageNum; i++) {
                  pageNumList.push(i);
              }
          } else {
              let limit =
                  3 - this.state.current > 0 ? 2 + (3 - this.state.current) : 2;
              let len =
                  pageNum - this.state.current > limit
                      ? limit
                      : pageNum - this.state.current;
              for (let i = 1; i <= len; i++) {
                  pageNumList.push(this.state.current + i);
              }
              if (pageNum - this.state.current > 2) {
                  pageNumList.push("next");
                  pageNumList.push(pageNum);
              }
          }
          return pageNumList;

      }
  
      getPageNum() {

          return (
              Math.ceil(
                  this.state.total /

                      (this.state.pageSize || this.props.defaultPageSize || 10)

              ) || 1
          );
      }
  
      getPopupContainer() {
          return $element[0].querySelector(".ant-pagination-options");

      }
  
      handleNext() {
          if (this.state.current === this.state.pageNum) {
              return false;
          }
          this.handleClick(++this.state.current);
      }
  

      handlePrev() {
          if (this.state.current === 1) {
              return false;
          }
          this.handleClick(--this.state.current);
      }
  
      handleClick(value) {

          if (value === this.state.current) {
              return;
          }

          if (value === "next") {
              value = this.state.current + 5;
          }
          if (value === "prev") {
              value = this.state.current - 5;
          }
          this.setCurrent(this.getCurrent(value));

      }
  
      handleChange() {
          let current = this.state.current;

          this.state.pageNum = this.getPageNum();
          this.state.pageNumList = this.getPageNumList();

          if (this.state.current > this.state.pageNum) {
              current = this.state.pageNum;
          } else if (this.state.current < 1) {
              current = 1;
          }
          this.props.onChange({
              page: current,

              pageSize: parseInt(this.state.pageSize),

          });
      }
  
      handleSelectChange(value) {
          this.state.current = 1;
          this.state.pageSize = parseInt(value);
          this.handleChange();
      }

      getCurrent(number) {
          if (number > this.state.pageNum) {
              return this.state.pageNum;
          }
          if (number < 1) {
              return 1;
          }
          return parseInt(number);
      }
  

      setCurrent(value) {

          if (!value) {
              return;
          }
          this.state.current = this.getCurrent(value);

          this.state.pageNumList = this.getPageNumList();

          this.handleChange();

      }
  
      handleBlur(event) {
          this.setCurrent(event.target.value);

          event.target.value = null;
      }

  
      onKeyPress(event) {
          if (event.keyCode === 13 || event.keyCode === 32) {
              this.setCurrent(event.target.value);
              event.target.value = null;
          }
      }

  }