import React, { useCallback, useState } from "react";
import clsx from "clsx";
import { InputProps } from "../interface";
import "./index.css";

/**
 * 基本表单组件，并在原生控件基础上进行了功能扩展，可以组合使用。
 *
 */
const Input: React.FC<InputProps> = props => {
  const {
    color,
    startAdornment,
    endAdornment,
    centerAdornment,
    error,
    inputRef,
    fullWidth,
    variant,
    square,
    className,
    style,
    startAdornmentProps,
    endAdornmentProps,
    onPressEnter,
    value,
    dark,
    textAlign,
    name,
    ...inputProps
  } = props as PickRequired<
    InputProps,
    "variant" | "color" | "autoFocus" | "square" | "fullWidth" | "error" | "startAdornmentProps" | "endAdornmentProps"
  >;

  // input是否获取焦点状态
  const [focused, setFocused] = useState(false);

  const rootClasses = clsx(
    "nts-input-root",

    {
      [`w-full`]: fullWidth,
      [`nts-input-square`]: square && variant === "outlined",
      [`nts-input-variant-outlined`]: variant === "outlined",
      [`nts-input-variant-standard`]: variant === "standard",
      [`nts-input-variant-focused`]: focused,
      [`nts-input-status-error`]: error,
      [`nts-input-with-adornment`]: !!startAdornment,
      [`nts-input-dark`]: dark
    },
    className
  );

  /** 处理获取焦点事件 */
  const handleFocused = useCallback(
    (event: React.FocusEvent<HTMLInputElement>, type: "focus" | "blur") => {
      inputProps.onFocus?.(event);
      setFocused(type === "focus");
    },
    [inputProps.onFocus, focused]
  );

  /** 处理回车事件 */
  const handleEnter = useCallback((event: React.KeyboardEvent<HTMLInputElement>) => {
    event.code === "Enter" && typeof onPressEnter === "function" && onPressEnter(event);
  }, []);

  return (
    <div className={rootClasses} style={style}>
      {startAdornment && (
        <div
          className={clsx(
            "nts-input-adornment nts-input-startAdornment",
            {
              [`nts-input-startAdornment-border`]: startAdornmentProps.border
            },
            startAdornmentProps.className
          )}
        >
          {startAdornment}
        </div>
      )}

      <div className={`relative flex-1 flex items-center ${inputProps?.classes?.inputRootContainer}`}>
        <input
          className={clsx(
            "nts-input-base",
            {
              ["text-left"]: textAlign === "left",
              ["text-right"]: textAlign === "right"
            },
            inputProps?.classes?.inputRoot
          )}
          ref={inputRef}
          type="text"
          id={name}
          name={name}
          value={value}
          {...inputProps}
          onFocus={event => handleFocused(event, "focus")}
          onBlur={event => handleFocused(event, "blur")}
          onKeyDown={handleEnter}
        />
        {centerAdornment && !value ? centerAdornment : ""}
      </div>

      {endAdornment && (
        <div
          className={clsx(
            "nts-input-adornment nts-input-endAdornment",
            {
              [`nts-input-endAdornment-border`]: endAdornmentProps.border
            },
            startAdornmentProps.className
          )}
        >
          {endAdornment}
        </div>
      )}
    </div>
  );
};

Input.defaultProps = {
  variant: "standard",
  color: "primary",
  autoFocus: false,
  square: false,
  fullWidth: false,
  error: false,
  startAdornmentProps: {},
  endAdornmentProps: {},
  dark: false,
  textAlign: "right"
};
export default Input;