/**
 * V21 Input 输入框
 * 封装 Ant Design Input，应用 V21 设计系统样式
 */
/* eslint-disable react-refresh/only-export-components */
import React from "react";
import { Input as AntInput } from "antd";
import type { InputProps as AntInputProps } from "antd";
import type { InputRef } from "antd/es/input";
import classNames from "classnames";
import "./ui.css";

const {
  Search: AntSearch,
  TextArea: AntTextArea,
  Password: AntPassword,
} = AntInput;

export interface InputProps extends AntInputProps {
  /** 是否处于错误状态 */
  error?: boolean;
}

/** 基础 Input */
const Input = React.forwardRef<InputRef, InputProps>(
  ({ className, error, ...rest }, ref) => {
    const v21Class = classNames(
      "xx-input",
      error && "xx-input-error",
      className,
    );
    return <AntInput ref={ref} className={v21Class} {...rest} />;
  },
);
Input.displayName = "Input";

/** Search 搜索框 */
const Search: React.FC<
  React.ComponentProps<typeof AntSearch> & { error?: boolean }
> = ({ className, error, ...rest }) => {
  const v21Class = classNames(
    "xx-input",
    "xx-input-search",
    error && "xx-input-error",
    className,
  );
  return <AntSearch className={v21Class} {...rest} />;
};

/** TextArea 文本域 */
const TextArea: React.FC<
  React.ComponentProps<typeof AntTextArea> & { error?: boolean }
> = ({ className, error, ...rest }) => {
  const v21Class = classNames("xx-input", error && "xx-input-error", className);
  return <AntTextArea className={v21Class} {...rest} />;
};

/** Password 密码框 */
const Password = React.forwardRef<
  InputRef,
  React.ComponentProps<typeof AntPassword> & { error?: boolean }
>(({ className, error, ...rest }, ref) => {
  const v21Class = classNames("xx-input", error && "xx-input-error", className);
  return <AntPassword ref={ref} className={v21Class} {...rest} />;
});
Password.displayName = "Password";

export default Object.assign(Input, {
  Search,
  TextArea,
  Password,
});
