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

export interface FormControlProps extends StyledProps {
  /**
   * 表单组件
   */
  children?: React.ReactNode;

  /**
   * 字段状态
   */
  status?: "success" | "error" | "validating";

  /**
   * 是否展示 icon
   * @default true
   */
  showStatusIcon?: boolean;

  /**
   * 表单说明信息/错误信息
   */
  message?: React.ReactNode;

  /**
   * 表单额外说明信息
   *
   * *可与 `message` 信息同时存在*
   *
   * @since 2.6.8
   */
  extra?: React.ReactNode;

  /**
   * 是否增加顶部间距，以对齐标签文本
   * @default false
   */
  alignLabelTop?: boolean;

  /**
   * 是否为必填字段
   * @default false
   */
  required?: boolean;
}

export const FormControl = React.forwardRef(function FormControl(
  {
    status,
    children,
    message,
    extra,
    alignLabelTop,
    showStatusIcon = true,
    className,
    ...props
  }: FormControlProps,
  ref: React.Ref<HTMLDivElement>
) {
  const { classPrefix } = useConfig();
  const controlClassName = classNames(
    `${classPrefix}-form__controls`,
    {
      [`${classPrefix}-form__controls--text`]: alignLabelTop,
      [`is-${status}`]: status,
    },
    className
  );
  return (
    <div ref={ref} className={controlClassName} {...props}>
      {children}
      <SlideTransition in={Boolean(status)} from={[-10, 0]}>
        {showStatusIcon ? (
          <b className={`${classPrefix}-icon ${classPrefix}-icon-valid`} />
        ) : (
          <b />
        )}
      </SlideTransition>
      {/* <FadeTransition in={Boolean(message)}> */}
      {Boolean(message) && (
        <div className={`${classPrefix}-form__help-text`}>{message}</div>
      )}
      {Boolean(extra) && (
        <div
          className={classNames(
            `${classPrefix}-form__help-extra`,
            `${classPrefix}-form__help-text`,
            `${classPrefix}-text-label`
          )}
        >
          {extra}
        </div>
      )}
      {/* </FadeTransition> */}
    </div>
  );
});

FormControl.displayName = "FormControl";