import ConfigProvider from '../config-provider';
import PropTypes from 'prop-types';
import React, { Component } from 'react';
import cls from 'classnames';
import hoistNonReactStatics from 'hoist-non-react-statics';
import { CommonThemeProps } from '../types';
import { Input } from '../index';
import { Pagination as NextPagination } from '@alifd/next';
import { PaginationProps as NextPaginationProps } from '@alifd/next/types/pagination';
import { getTheme } from '../utils/getTheme';

interface PageStates {
  currentPage:number;
  total:number;
  pageSize:number;
  inputValue:number;
}

interface PaginationProps extends NextPaginationProps, CommonThemeProps {}
class Pagination extends Component<PaginationProps, PageStates> {
  constructor(props) {
    super(props);
    this.state = {
      currentPage: this.props.current || this.props.defaultCurrent || 1,
      total: this.props.total || 100,
      pageSize: this.props.pageSize || 10,
      inputValue: this.props.current || this.props.defaultCurrent || 1,
    };
  }
  onInputChange = value => {
    this.setState({
      inputValue: value,
    });
  };
  handleJump = e => {
    const { currentPage, inputValue } = this.state;
    const { total, pageSize } = this.state;
    let value = parseInt(String(inputValue), 10);
    const totalPage = Math.ceil(total / pageSize) <= 0 ? 1 : Math.ceil(total / pageSize);
    if (isNaN(value)) {
      value = currentPage;
    } else if (value < 1) {
      value = 1;
    } else if (value > totalPage) {
      value = totalPage;
    }
    if (value && value !== currentPage) {
      this.onChange(value, e);
    }
  };
  onKeyDown = e => {
    if (e.keyCode === 13) {
      this.handleJump(e);
    }
  };
  pageNumberRender = index => {
    const { inputValue } = this.state;
    const { prefix = 'next-' } = this.props;
    if (index === this.state.currentPage) {
      return (<div className={`${prefix}pagonation-bdesign-page`}>
        <Input
          size='xs'
          className={`${prefix}pagonation-current-input`}
          value={inputValue}
          onChange={this.onInputChange}
          onKeyDown={this.onKeyDown}
        />
        <div className={`${prefix}pagonation-lastPage-text`}>{index}</div>
      </div>);
    }
    return index;
  };
  onChange = (current, e) => {
    const { onChange } = this.props;
    this.setState({
      currentPage: current,
      inputValue: current,
    });
    onChange && onChange(current, e);

  };

  // contextTypes
  static contextTypes = {
    theme: PropTypes.string,
  };

  render() {
    const { prefix = 'next-', type, className } = this.props;

    const theme = getTheme(this.context, this.props);

    // mini 模式
    if (type === 'mini') {
      const {
        prefix = 'next-',
        className,
        ...otherProps
      } = this.props;

      return (
        <NextPagination
          {...otherProps}
          type="normal"
          showJump={false}
          prefix={prefix}
          size="small"
          shape="arrow-only"
          className={cls(className, {
            [`${prefix}grey`]: theme === 'grey',
            [`${prefix}white`]: theme === 'white',
          })}
        />
      );
    }
    if (type === 'simple') {
      const {
        prefix = 'next-',
        className,
        ...otherProps
      } = this.props;

      return (
        <NextPagination
          {...otherProps}
          type="simple"
          showJump={false}
          prefix={prefix}
          size="small"
          shape="arrow-only"
          current={this.state.currentPage}
          className={cls(className, {
            [`${prefix}grey`]: theme === 'grey',
            [`${prefix}white`]: theme === 'white',
          })}
          onChange={this.onChange}
          pageNumberRender={this.pageNumberRender}

        />
      );
    }

    return <NextPagination
      {...this.props}
      shape='arrow-only'
      size='medium'
      className={cls(className, {
        [`${prefix}grey`]: theme === 'grey',
        [`${prefix}white`]: theme === 'white',
      })} />;
  }
}

hoistNonReactStatics(Pagination, NextPagination);

export default ConfigProvider.config(Pagination);