import React, { forwardRef } from "react";
import classNames from "classnames";
import { PaginationButton } from "../pagination/Pagination";
import { StyledProps } from "../_type";
import { useConfig } from "../_util/config-context";

export interface JumperProps extends StyledProps {
  /**
   * 是否使用无边框样式
   * @default false
   */
  noBordered?: boolean;

  /**
   * 按钮方向
   * @default "leftright"
   */
  direction?: "updown" | "leftright";

  /**
   * 是否展示当前按钮
   * @default false
   */
  showCurrent?: boolean;

  /**
   * 是否处于当前状态
   * @default false
   */
  isCurrent?: boolean;

  /** 点击下一步回调函数 */
  onNext?: () => void;

  /** 点击上一步回调函数 */
  onPrev?: () => void;

  /** 点击当前回调函数 */
  onCurrent?: () => void;

  /**
   * 下一步按钮是否可用
   * @default false
   */
  nextDisabled?: boolean;

  /**
   * 上一步按钮是否可用
   * @default false
   */
  prevDisabled?: boolean;

  /**
   * 当前按钮是否可用
   * @default false
   */
  curDisabled?: boolean;

  /** 下一步提示文案 */
  nextTitle?: string;

  /** 上一步提示文案 */
  prevTitle?: string;

  /** 当前提示文案 */
  curTitle?: string;
}

export const Jumper = forwardRef(function Jumper(
  {
    direction,
    noBordered,
    showCurrent = false,
    isCurrent,
    onNext,
    onPrev,
    onCurrent,
    nextDisabled = false,
    prevDisabled = false,
    curDisabled = false,
    nextTitle,
    prevTitle,
    curTitle,
    className,
    ...props
  }: JumperProps,
  ref: React.Ref<HTMLDivElement>
) {
  const { classPrefix } = useConfig();
  return (
    <div
      ref={ref}
      className={classNames(
        `${classPrefix}-pagination`,
        { [`${classPrefix}-pagination--bordernone`]: noBordered },
        className
      )}
      {...props}
    >
      <PaginationButton
        type="pre"
        icon={direction === "updown" ? "arrowup" : "arrowleft"}
        disabled={prevDisabled}
        title={prevTitle}
        onClick={onPrev}
        classPrefix={classPrefix}
      />
      {showCurrent && (
        <PaginationButton
          type="cur"
          icon={isCurrent ? "cur-active" : "cur"}
          disabled={curDisabled}
          title={curTitle}
          onClick={onCurrent}
          classPrefix={classPrefix}
        />
      )}
      <PaginationButton
        type="next"
        icon={direction === "updown" ? "arrowdown" : "arrowright"}
        disabled={nextDisabled}
        title={nextTitle}
        onClick={onNext}
        classPrefix={classPrefix}
      />
    </div>
  );
});

Jumper.displayName = "Jumper";