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
 */
var Input = function Input(_ref) {
  var placeholder = _ref.placeholder,
    content = _ref.content,
    label = _ref.label,
    value = _ref.value,
    extraContents = _ref.extraContents,
    _ref$height = _ref.height,
    height = _ref$height === void 0 ? 28.2 : _ref$height,
    _ref$readOnly = _ref.readOnly,
    readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
    _ref$center = _ref.center,
    center = _ref$center === void 0 ? false : _ref$center,
    _ref$width = _ref.width,
    width = _ref$width === void 0 ? 100 : _ref$width,
    onChange = _ref.onChange,
    onKeyDown = _ref.onKeyDown,
    onBlur = _ref.onBlur,
    onClick = _ref.onClick;
  var _useTranslation = useTranslation(),
    t = _useTranslation.t;
  var _content = useRef('');
  var handleChange = function 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(function (el) {
          return /*#__PURE__*/_jsx("div", {
            className: "content",
            children: el
          }, uuid());
        }) : /*#__PURE__*/_jsx(_Fragment, {})]
      })]
    })
  });
};
export default Input;