import { View, Textarea, InputProps } from "@tarojs/components";
import styleIndex from "./index.module.less";
import { useState, useRef, useEffect } from "react";
import { countCharacters, getStrByMaxLength } from "@/utils/index";
interface Props {
  placeholder?: string;
  value: string;
  cursorSpacing?: number;
  maxlength?: number;
  autoHeight?: boolean;
  disabled?: boolean;
  confirmType?: keyof InputProps.ConfirmType;
  extra?: () => JSX.Element | JSX.Element[] | undefined;
  prefix?: () => JSX.Element | JSX.Element[] | undefined;
  style?: React.CSSProperties;
  onInput?: (value: string) => void;
  onBlur?: (value: string) => void;
  bgColor?: string;
  autoFocus?: boolean;
  extraClass?: string;
  onConfirm?: (value: string) => void;
  placeholderStyle?: string;
}
let isInbox = false;
const index = ({
  value,
  bgColor,
  extraClass,
  style,
  disabled,
  confirmType,
  prefix,
  autoHeight,
  autoFocus = false,
  placeholder = "请输入...",
  onInput,
  onBlur,
  cursorSpacing,
  maxlength,
  extra,
  onConfirm,
  placeholderStyle,
}: Props) => {
  const [focus, setFocus] = useState(false);
  const inputRef = useRef<HTMLInputElement>(null); // 创建一个 ref

  const handleFocus = () => {
    isInbox = false;
    setFocus(true);
  };
  const handleBlur = () => {
    // console.log("textarea blur");
    if (!isInbox) {
      setFocus(false);
      if (onBlur && inputRef.current) {
        onBlur(inputRef.current.value);
      }
    }
  };
  const handleInput = (value: string) => {
    const len = countCharacters(value);
    if (maxlength && len > maxlength) {
      const r = getStrByMaxLength(value, maxlength);
      onInput && onInput(r);
      return;
    }
    onInput && onInput(value);
  };

  return (
    <View
      className={`${
        focus ? styleIndex.inputContainerFocused : styleIndex.inputContainer
      }  p-12`}
      style={bgColor ? { backgroundColor: bgColor } : {}}
    >
      {prefix && prefix()}
      <View className={styleIndex.textareaContainer}>
        <Textarea
          ref={inputRef}
          value={value}
          disabled={disabled}
          confirmType={confirmType}
          style={style}
          onInput={(e: any) => handleInput(e.target.value)}
          placeholder={placeholder}
          placeholderStyle={placeholderStyle ?? 'color: rgba(17,17,17,.25)'}
          className={`${styleIndex.textInput} ${extraClass}`}
          onFocus={handleFocus}
          onBlur={handleBlur}
          autoHeight={autoHeight}
          autoFocus={autoFocus}
          cursorSpacing={cursorSpacing}
          maxlength={10000}
          onConfirm={(e: any) => {
            onConfirm && onConfirm(e.detail.value);
          }}
        />
        <View className={`${styleIndex.textareaButtons} justify-end gap-8`}>
          {extra && extra()}
          {/* <View className={`button-rounded-mini ${!value.length ? 'disabled' :''}`} onClick={handleClear}>清除</View> */}
          {maxlength && (
            <View className="text-gray-4">
              {maxlength}/{countCharacters(value)}
            </View>
          )}
        </View>
      </View>
    </View>
  );
};
export default index;