import React, { FC, useContext } from 'react';
import { LeftOutlined, RightOutlined } from '@ant-design/icons';
import Tooltip from '../tooltip';
import Button, { ButtonSize } from '../button';
import { ConfigContext } from '../config-provider';

export interface SimplePaginationProps {
  size?: ButtonSize;

  /** 下一页是否可点击 */
  hasNext?: boolean;

  /** 上一页是否可点击 */
  hasPrevious?: boolean;

  /** 上一页的 tooltip */
  previousTooltip?: string;

  /** 下一页的 tooltip */
  nextTooltip?: string;

  /** 下一页点击事件 */
  onNext?(): void;

  /** 上一页点击事件 */
  onPrevious?(): void;

  style?: React.CSSProperties;
}

const SimplePagination: FC<SimplePaginationProps> = ({
  size,
  hasNext,
  hasPrevious,
  previousTooltip,
  nextTooltip,
  onNext,
  onPrevious,
  style,
}) => {
  const { getPrefixCls } = useContext(ConfigContext);

  const previous = (
    <Button
      className={getPrefixCls('new-pagination-button')}
      icon={<LeftOutlined style={{ fontSize: 13 }} />}
      disabled={!hasPrevious}
      onClick={onPrevious}
      size={size}
    />
  );
  const next = (
    <Button
      className={getPrefixCls('new-pagination-button')}
      size={size}
      icon={<RightOutlined style={{ fontSize: 13 }} />}
      style={{ marginLeft: 10 }}
      disabled={!hasNext}
      onClick={onNext}
    />
  );

  const constructedPrevious = previousTooltip ? (
    <Tooltip title={previousTooltip}>{previous}</Tooltip>
  ) : (
    previous
  );
  const constructedNext = nextTooltip ? <Tooltip title={nextTooltip}>{next}</Tooltip> : next;

  return (
    <div style={style}>
      {constructedPrevious}
      {constructedNext}
    </div>
  );
};

export default SimplePagination;