import {
  Pagination as OldPagination,
  ConfigProvider,
  PaginationProps,
} from 'antd';
import './index.less';
import classNames from 'classnames';
import React, { useContext, useMemo } from 'react';
import { Icon } from '../index';
import { Select } from '../Select';
import { AOP } from '../utils/AOP';

type cusProps = {
  spaceBetween?: boolean;
};
const Pagination = (props: PaginationProps & cusProps) => {
  // 为了与 antd 的生态保持兼容性，我们要求必须要使用 `.@{ant-prefix}` 变量来生成类名
  const { getPrefixCls, locale } = useContext(ConfigProvider.ConfigContext);
  const prefixCls = getPrefixCls('btri-pagination');
  const _paginationSizeOption = useMemo(() => {
    const defaultSizes = [10, 20, 50, 100];
    return (props.pageSizeOptions || defaultSizes)?.map((item) => {
      return {
        label: `${item}条/页`,
        value: item,
      };
    });
  }, [props.pageSizeOptions]);
  const sizeEnum = {
    small: 'small',
    default: 'middle',
  };
  const [_current, setCurrent] = React.useState(props.defaultCurrent || 1);
  const [_pageSize, setPageSize] = React.useState(
    props.defaultPageSize || _paginationSizeOption[0].value,
  );
  const _onChange = new AOP<number, void>(props.onChange)
    .before((current, pageSize) => {
      setCurrent(current);
      setPageSize(pageSize);
    })
    .getFunction();
  const _onShowSizeChange = new AOP<number, void>(props.onShowSizeChange)
    .before((current, pageSize) => {
      setCurrent(current);
      setPageSize(pageSize);
    })
    .getFunction();

  return (
    <div
      className={classNames(`${prefixCls}-box`, props.className)}
      style={props.style}
    >
      <OldPagination
        {...props}
        className={classNames(
          `${prefixCls}`,
          `${props.className}`,
          props.spaceBetween && props.showTotal && `${prefixCls}-containers`,
        )}
        itemRender={(current, type, originalElement) => {
          if (type == 'prev') {
            return (
              <div className={`${prefixCls}-prev`}>
                <Icon iconName="LeftSmall" />
              </div>
            );
          } else if (type === 'next') {
            return (
              <div className={`${prefixCls}-next`}>
                <Icon iconName="RightSmall" />
              </div>
            );
          }
          return originalElement;
        }}
        showSizeChanger={false}
        onChange={_onChange}
        pageSize={props.pageSize || _pageSize}
        onShowSizeChange={_onShowSizeChange}
        style={{}}
      />
      {props.showSizeChanger && (
        <Select
          onSelect={(e) => {
            setPageSize(e);
            const cur =
              _current > Math.ceil(props.total / e)
                ? Math.ceil(props.total / e)
                : _current;
            _onShowSizeChange(cur, e);
            _onChange(cur, e);
          }}
          disabled={props.disabled}
          size={sizeEnum[props.size] as any}
          defaultValue={props.defaultPageSize || _paginationSizeOption[0]}
          options={_paginationSizeOption}
        />
      )}
    </div>
  );
};

export { Pagination };