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;
  suffix?: () => 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;
  adjustPosition?: boolean
  onConfirm?: (value: string) => void;
  placeholderStyle?: string;
}
let isInbox = false;
const index = ({
  value,
  bgColor,
  extraClass,
  style,
  disabled,
  confirmType,
  prefix,
  suffix,
  autoHeight,
  autoFocus = false,
  placeholder = "请输入...",
  onInput,
  onBlur,
  cursorSpacing,
  maxlength,
  extra,
  onConfirm,
  placeholderStyle,
  adjustPosition,
}: 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}>
        <View className="flex items-end">
          <Textarea
            ref={inputRef}
            value={value}
            disabled={disabled}
            adjustPosition={adjustPosition}
            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);
            }}
          />
          {suffix && suffix()}
        </View>
        <View className={`${styleIndex.textareaButtons} justify-end gap-8`}>
          {extra && extra()}
          {maxlength && (
            <View className="text-gray-4">
              {maxlength}/{countCharacters(value)}
            </View>
          )}
        </View>
      </View>
    </View>
  );
};
export default index;
