import React from "react";
import classNames from "classnames";
import { StyledProps } from "../_type";
import { useConfig } from "../_util/config-context";

export interface StepperProps extends StyledProps {
  /**
   * 步骤条的类型
   *
   * - `default` - 用于多步操作中进行步骤指示，水平布局
   * - `vertical` - 用于多步操作中进行步骤指示，垂直布局
   * - `process` - 用于展示一个流程说明，水平布局
   * - `process-vertical` - 用于展示一个流程说明，垂直布局
   * - `process-vertical-dot` 用于展示一个流程说明，垂直布局，并且用圆点表示步骤
   * @default "default"
   */
  type?:
    | "default"
    | "vertical"
    | "process"
    | "process-vertical"
    | "process-vertical-dot";

  /**
   * 步骤条中步骤列表
   */
  steps: Step[];

  /**
   * 当前激活步骤的 `key`
   */
  current?: string;

  /**
   * 步骤标题展示不换行
   *
   * @default false
   */
  nowrap?: boolean;

  /**
   * 仅用做展示的步骤条，没有进度状态区分
   *
   * **建议直接使用流程说明类型步骤条**
   *
   * @default false
   */
  readonly?: boolean;
}

export interface Step extends StyledProps {
  /**
   * 步骤条中步骤项 `id`，在同一个步骤条中不允许重复
   */
  id: string;

  /**
   * 步骤说明文本
   */
  label?: React.ReactNode;

  /**
   * 关于当前步骤的详细说明
   */
  detail?: React.ReactNode;

  /**
   * 当前步骤到下一个步骤的提示内容
   * 可以描述步骤的预计耗时，或者通过条件等
   */
  tip?: React.ReactNode;
}

export const Stepper = React.forwardRef(function Stepper(
  { type, steps, current, readonly, nowrap, className, ...props }: StepperProps,
  ref: React.Ref<HTMLDivElement>
) {
  const { classPrefix } = useConfig();
  const stepperClassName = classNames({
    [`${classPrefix}-step`]: true,
    [`${classPrefix}-step--vertical-new`]: type === "vertical",
    [`${classPrefix}-step--alternative`]: type === "process",
    [`${classPrefix}-step--vertical`]: type === "process-vertical",
    [`${classPrefix}-step--dot`]: type === "process-vertical-dot",
    [`${classPrefix}-step--readonly`]: readonly,
    [`${classPrefix}-step--wrap-normal`]: nowrap,
    [className]: className,
  });

  return (
    <div ref={ref} className={stepperClassName} {...props}>
      {steps.map((step, index, steps) => (
        <div
          key={step.id}
          className={classNames(`${classPrefix}-step__item`, step.className, {
            "is-current": !readonly && step.id === current,
          })}
          style={step.style}
        >
          <div className={`${classPrefix}-step__num`}>{index + 1}</div>
          <div className={`${classPrefix}-step__content`}>
            <div className={`${classPrefix}-step__title`}>{step.label}</div>
            {step.detail && (
              <div className={`${classPrefix}-step__description`}>
                {step.detail}
              </div>
            )}
          </div>
          {step.tip && (
            <div className={`${classPrefix}-step__tips`}>{step.tip}</div>
          )}
          {index < steps.length - 1 && (
            <div className={`${classPrefix}-step__arrow`} />
          )}
        </div>
      ))}
    </div>
  );
});

Stepper.displayName = "Stepper";