import React, { useRef } from 'react';
import { useTranslation } from 'react-i18next';
import { InputWrap } from "./InputWrap";
import { uuid } from "../..\\utils\\uuid";
import { jsx as _jsx } from "react/jsx-runtime";
import { Fragment as _Fragment } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
/**
 * A ez way to handle input correctly
 * @param placeholder {string} 默认占位符
 * @param content {string} 默认值
 * @returns
 */
const Input = ({
  placeholder,
  content,
  label,
  value,
  extraContents,
  height: _height = 28.2,
  readOnly: _readOnly = false,
  center: _center = false,
  width: _width = 100,
  onChange,
  onKeyDown,
  onBlur,
  onClick
}) => {
  const {
    t
  } = useTranslation();
  const _content = useRef('');
  const handleChange = e => {
    _content.current = e.currentTarget.value;
    if (content) {
      content.current = e.currentTarget.value;
    }
  };
  return /*#__PURE__*/_jsx(InputWrap, {
    height: _height,
    center: _center,
    width: _width,
    children: /*#__PURE__*/_jsxs("div", {
      className: "inputContainer",
      children: [label && /*#__PURE__*/_jsx("div", {
        className: "inputLabel",
        children: t(label)
      }), /*#__PURE__*/_jsxs("div", {
        className: "contentContainer",
        children: [/*#__PURE__*/_jsx("textarea", {
          placeholder: placeholder,
          onInput: handleChange,
          value: value,
          readOnly: _readOnly,
          className: "inputBox",
          onChange: onChange,
          onBlur: onBlur,
          onClick: onClick,
          onKeyDown: onKeyDown
        }), extraContents ? extraContents.map(el => /*#__PURE__*/_jsx("div", {
          className: "content",
          children: el
        }, uuid())) : /*#__PURE__*/_jsx(_Fragment, {})]
      })]
    })
  });
};
export default Input;