import React from 'react';
import { Renderer, RendererProps } from '../factory';
import { autobind } from '../utils/helper';
import { Icon } from '../components/icons';
import { BaseSchema, SchemaClassName } from '../Schema';

export interface PaginationSchema extends BaseSchema {
  type: 'pagination';

  className?: SchemaClassName;

  /**
   * 是否显示快速跳转输入框
   */
  showPageInput?: boolean;

  /**
   * 模式，默认显示多个分页数字，如果只想简单显示可以配置成 `simple`。
   */
  mode?: 'simple' | 'normal';

  /**
   * 最多显示多少个分页按钮。
   *
   * @default 5
   */
  maxButtons?: number;

  // 判断是否在小型弹窗里面用的
  inSmallDialog?: boolean
}

export interface PaginationProps
  extends RendererProps,
  Omit<PaginationSchema, 'type' | 'className'> {
  activePage: number;
  lastPage: number;
  hasNext: boolean;
  maxButtons: number;
  onPageChange: (page: number, perPage?: number) => void;
}

export interface PaginationState {
  pageNum: string;
}

export default class Pagination extends React.Component<
  PaginationProps,
  PaginationState
> {
  static defaultProps = {
    activePage: 1,
    lastPage: 1,
    maxButtons: 5,
    mode: 'normal',
    hasNext: false,
    showPageInput: false
  };



  state = {
    pageNum: String(this.props.activePage) || ''
  };

  componentDidUpdate(prevProps: PaginationProps) {
    const props = this.props;
    if (prevProps.activePage !== props.activePage) {
      this.setState({
        pageNum: String(props.activePage) || ''
      });
    }
  }

  renderSimple() {
    const { activePage, hasNext, onPageChange, classnames: cx } = this.props;

    return (
      <ul className={cx('Pagination', 'Pagination--sm')}>
        <li
          className={cx({
            'is-disabled': activePage < 2
          })}
          onClick={
            activePage < 2
              ? e => e.preventDefault()
              : () => onPageChange(activePage - 1)
          }
        >
          <a>
            <Icon icon="left-arrow" className="icon" />
          </a>
        </li>
        <li
          className={cx({
            'is-disabled': !hasNext
          })}
          onClick={
            !hasNext
              ? e => e.preventDefault()
              : () => onPageChange(activePage + 1)
          }
        >
          <a>
            <Icon icon="right-arrow" className="icon" />
          </a>
        </li>
      </ul>
    );
  }

  handlePageChange = (e: React.ChangeEvent<any>) => {
    const { lastPage } = this.props;
    let value = e.currentTarget.value;

    if (/^\d+$/.test(value) && parseInt(value, 10) > lastPage) {
      value = String(lastPage);
    }

    this.setState({ pageNum: value });
  }
  initFn: any

  renderNormal() {
    let {
      activePage,
      lastPage,
      maxButtons,
      onPageChange,
      classnames: cx,
      showPageInput,
      className,
      translate: __
    } = this.props;
    const pageNum = this.state.pageNum;

    let pageButtons: any = [];
    let startPage: number;
    let endPage: number;

    if (activePage < (maxButtons - 1) / 2 + 2) {
      maxButtons = activePage + (maxButtons - 1) / 2;
    }

    if (lastPage - activePage < (maxButtons - 1) / 2 + 2) {
      maxButtons = lastPage - activePage + (maxButtons - 1) / 2 + 1;
    }

    if (maxButtons && maxButtons < lastPage) {
      startPage = Math.max(
        Math.min(
          activePage - Math.floor(maxButtons / 2),
          lastPage - maxButtons + 1
        ),
        1
      );
      endPage = startPage + maxButtons - 1;
    } else {
      startPage = 1;
      endPage = lastPage;
    }

    // 小型弹窗里面不展示具体页数字
    // if (!this.props.inSmallDialog)
    //   for (let page = startPage; page <= endPage; ++page) {
    //     pageButtons.push(
    //       <li
    //         onClick={() => onPageChange(page)}
    //         key={page}
    //         className={cx({
    //           'is-active': page === activePage
    //         })}
    //       >
    //         <a role="button">{page}</a>
    //       </li>
    //     );
    //   }

    // if (startPage > 1) {
    //   // 小型弹窗里面不展示具体页数字
    //   if (!this.props.inSmallDialog)
    //     if (startPage > 2) {
    //       pageButtons.unshift(
    //         <li onClick={() => onPageChange(startPage - 1)} key="prev-ellipsis">
    //           <a role="button">...</a>
    //         </li>
    //       );
    //     }

    //   // 小型弹窗里面不展示具体页数字
    //   if (!this.props.inSmallDialog)
    //     pageButtons.unshift(
    //       <li
    //         onClick={() => onPageChange(1)}
    //         key={1}
    //         className={cx({
    //           'is-active': 1 === activePage
    //         })}
    //       >
    //         <a role="button">{1}</a>
    //       </li>
    //     );
    // }

    // if (endPage < lastPage) {
    //   // 小型弹窗里面不展示具体页数字
    //   if (!this.props.inSmallDialog)
    //     if (lastPage - endPage > 1) {
    //       pageButtons.push(
    //         <li
    //           className={cx('Pagination-ellipsis')}
    //           onClick={() => onPageChange(endPage + 1)}
    //           key="next-ellipsis"
    //         >
    //           <a role="button">
    //             <span>...</span>
    //           </a>
    //         </li>
    //       );
    //     }

    //   // 小型弹窗里面不展示具体页数字
    //   if (!this.props.inSmallDialog)
    //     pageButtons.push(
    //       <li
    //         onClick={() => onPageChange(lastPage)}
    //         key={lastPage}
    //         className={cx({
    //           'is-active': lastPage === activePage
    //         })}
    //       >
    //         <a role="button">{lastPage}</a>
    //       </li>
    //     );
    // }

    // Jay
    // const commonStyle: any = { display: 'inline-block', width: 30, height: 30, margin: '0 8px', background: '#f4f4f5', border: '1px solid #d9d9d9' }
    let commonStyle: any;
    if (window.screen.width > 1680) {
      commonStyle = { display: 'inline-block', maxHeight: 30 }
    } else if (window.screen.width <= 1680 && window.screen.width > 1440) {
      commonStyle = { display: 'inline-block', maxHeight: 25, lineHeight: '23px', }
    } else if (window.screen.width <= 1440 && window.screen.width >= 1280) {
      commonStyle = { display: 'inline-block', height: 20, lineHeight: '18px', }
    }
    // window.addEventListener('resize', this.initFn)

    pageButtons.unshift(
      <div
        className={cx('Pagination-prev', {
          'is-disabled': activePage === 1
        })}
        onClick={
          activePage === 1
            ? (e: any) => e.preventDefault()
            : () => onPageChange(activePage - 1)
        }
        key="prev"
      >
        {/* Jay 修改样式 */}
        <span style={commonStyle}>
          <Icon icon="left-arrow" className="icon" />
        </span>
      </div>
    );

    pageButtons.push(<div>
      <span>
        <input
          type="text"
          className='pagination-page-switch'
          onChange={this.handlePageChange}
          onFocus={(e: any) => e.currentTarget.select()}
          onKeyUp={(e: any) =>
            e.keyCode == 13 &&
            onPageChange(parseInt(e.currentTarget.value, 10))
          }
          value={pageNum}
        />
        <span> / {lastPage}</span>
      </span>
    </div>)

    pageButtons.push(
      <div
        className={cx('Pagination-next', {
          'is-disabled': activePage === lastPage
        })}
        onClick={
          activePage === lastPage
            ? (e: any) => e.preventDefault()
            : () => onPageChange(activePage + 1)
        }
        key="next"
      >
        <span style={commonStyle}>
          <Icon icon="right-arrow" className="icon" />
        </span>
      </div>
    );

    return (
      <div className={cx('Pagination-wrap', className)}>
        <div className={cx('Pagination', 'Pagination--sm')}>{pageButtons}</div>
      </div>
    );
  }
  componentWillUnmount(): void {
    window.removeEventListener('resize', this.initFn)
  }

  render() {
    const { builderMode } = this.props;

    return builderMode === 'simple' ? this.renderSimple() : this.renderNormal();
  }
}

@Renderer({
  test: /(^|\/)(?:pagination|pager)$/,
  name: 'pagination'
})
export class PaginationRenderer extends Pagination { }