import React, { useRef } from 'react';
import { useTranslation } from 'react-i18next';
import { InputWrap } from './InputWrap';
import { uuid } from '@/utils/uuid';

export interface InputProps {
  width?: string;
  label?: string;
  value?: string;
  placeholder?: string;
  content?: React.MutableRefObject<string>;
  extraContents?: React.ReactNode[];
  height?: number | string;
  readOnly?: boolean;
  center?: boolean;
  onChange?: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
  onKeyDown?: (e: React.KeyboardEvent<HTMLTextAreaElement>) => void;
  onBlur?: (e: React.FocusEvent<HTMLTextAreaElement, Element>) => void;
  onClick?: (e: React.MouseEvent<HTMLTextAreaElement, MouseEvent>) => void;
}

/**
 * A ez way to handle input correctly
 * @param placeholder {string} 默认占位符
 * @param content {string} 默认值
 * @returns
 */
const Input: React.FC<InputProps> = ({
  placeholder,
  content,
  label,
  value,
  extraContents,
  height = 28.2,
  readOnly = false,
  center = false,
  width = 100,
  onChange,
  onKeyDown,
  onBlur,
  onClick,
}) => {
  const { t } = useTranslation();
  const _content = useRef<string>('');
  const handleChange = (e: React.FormEvent<HTMLTextAreaElement>) => {
    _content.current = e.currentTarget.value;
    if (content) {
      content.current = e.currentTarget.value;
    }
  };
  return (
    <InputWrap height={height} center={center} width={width}>
      <div className="inputContainer">
        {label && <div className="inputLabel">{t(label)}</div>}
        <div className="contentContainer">
          <textarea
            placeholder={placeholder}
            onInput={handleChange}
            value={value}
            readOnly={readOnly}
            className="inputBox"
            onChange={onChange}
            onBlur={onBlur}
            onClick={onClick}
            onKeyDown={onKeyDown}
          />
          {extraContents ? (
            extraContents.map(el => (
              <div className="content" key={uuid()}>
                {el}
              </div>
            ))
          ) : (
            <></>
          )}
        </div>
      </div>
    </InputWrap>
  );
};

export default Input;
