var __getOwnPropSymbols = Object.getOwnPropertySymbols;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __propIsEnum = Object.prototype.propertyIsEnumerable;
var __objRest = (source, exclude) => {
  var target = {};
  for (var prop in source)
    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
      target[prop] = source[prop];
  if (source != null && __getOwnPropSymbols)
    for (var prop of __getOwnPropSymbols(source)) {
      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
        target[prop] = source[prop];
    }
  return target;
};
import React, { useRef, useState, useEffect, forwardRef, useImperativeHandle, useMemo, useContext } from "react";
import classnames from "classnames";
import Icon from "../icon";
import Cell from "../cell";
import Dialog from "../dialog";
import { isDef, addUnit, formatNumber, isObject, preventDefault, resetScroll } from "../utils";
import ConfigProviderContext from "../config-provider/ConfigProviderContext";
import { COMPONENT_TYPE_KEY } from "../utils/constant";
const ICON_SIZE = "16px";
const Field = /* @__PURE__ */ forwardRef((props, ref) => {
  const {
    prefixCls,
    createNamespace
  } = useContext(ConfigProviderContext);
  const [bem] = createNamespace("field", prefixCls);
  const [inputFocus, setInputFocus] = useState(false);
  const fieldRef = useRef(null);
  const inputRef = useRef(null);
  const [compositing, setCompositing] = React.useState(false);
  useEffect(() => {
    if (props.getFieldRef)
      props.getFieldRef(fieldRef);
    if (props.getInputRef)
      props.getInputRef(inputRef);
  }, [props.getFieldRef, props.getInputRef]);
  const focus = () => {
    var _a;
    (_a = inputRef.current) == null ? void 0 : _a.focus();
  };
  const blur = () => {
    var _a;
    (_a = inputRef.current) == null ? void 0 : _a.blur();
  };
  useImperativeHandle(ref, () => ({
    focus,
    blur
  }));
  const getProp = (key) => {
    return isDef(props[key]) ? props[key] : null;
  };
  const getModelValue = () => {
    var _a;
    return String((_a = props.value) != null ? _a : "");
  };
  const showClear = useMemo(() => {
    const readonly = getProp("readonly");
    if (props.clearable && !readonly) {
      const hasValue = getModelValue() !== "";
      const trigger = props.clearTrigger === "always" || props.clearTrigger === "focus" && inputFocus;
      return hasValue && trigger;
    }
    return false;
  }, [props.value, props.clearTrigger, inputFocus]);
  const labelStyle = () => {
    const labelW = getProp("labelWidth");
    if (labelW) {
      return {
        width: addUnit(labelW)
      };
    }
    return {};
  };
  const adjustSize = () => {
    const input = inputRef.current;
    if (!(props.type === "textarea" && props.autosize) || !input) {
      return;
    }
    input.style.height = "auto";
    let height = input.scrollHeight;
    if (isObject(props.autosize)) {
      const {
        maxHeight,
        minHeight
      } = props.autosize;
      if (maxHeight) {
        height = Math.min(height, maxHeight);
      }
      if (minHeight) {
        height = Math.max(height, minHeight);
      }
    }
    if (height) {
      input.style.height = `${height}px`;
    }
  };
  useEffect(() => {
    adjustSize();
  }, [props.value]);
  const renderInput = () => {
    const {
      type: type2,
      name,
      rows,
      value,
      placeholder,
      disabled: disabled2,
      readonly,
      onClickInput
    } = props;
    const controlClass = bem("control", [getProp("inputAlign"), {
      custom: !!props.children,
      "min-height": props.type === "textarea" && !props.autosize
    }]);
    if (props.children) {
      return /* @__PURE__ */ React.createElement("div", {
        className: classnames(controlClass),
        onClick: onClickInput
      }, props.children);
    }
    const limitValueLength = (val) => {
      const {
        maxlength
      } = props;
      if (isDef(maxlength) && val.length > maxlength && !compositing) {
        const modelValue = getModelValue();
        if (modelValue && modelValue.length === +maxlength) {
          return modelValue;
        }
        return val.slice(0, +maxlength);
      }
      return val;
    };
    const updateValue = (val, trigger = "onChange") => {
      val = limitValueLength(val);
      if (props.type === "number" || props.type === "digit") {
        const isNumber = props.type === "number";
        val = formatNumber(val, isNumber, isNumber);
      }
      if (props.formatter && trigger === props.formatTrigger) {
        val = props.formatter(val);
      }
      if (inputRef.current && inputRef.current.value !== val) {
        inputRef.current.value = val;
      }
      if (val !== props.value) {
        if (props.onChange && typeof props.onChange === "function") {
          props.onChange(val);
        }
      }
    };
    const handleChange = (e) => {
      var _a;
      const inputValue = (_a = e == null ? void 0 : e.target) == null ? void 0 : _a.value;
      updateValue(inputValue, "onChange");
    };
    const handleCompositionStart = (_) => {
      setCompositing(true);
    };
    const handleCompositionEnd = (e) => {
      setCompositing(false);
      const triggerValue = e.currentTarget.value;
      updateValue(triggerValue);
    };
    const handleFocus = (e) => {
      const {
        onFocus
      } = props;
      setInputFocus(true);
      if (onFocus && typeof onFocus === "function") {
        onFocus(e);
      }
      if (readonly) {
        blur();
      }
    };
    const handleBlur = (e) => {
      const {
        onBlur
      } = props;
      setInputFocus(false);
      updateValue(getModelValue(), "onBlur");
      if (onBlur && typeof onBlur === "function") {
        onBlur(e);
      }
      resetScroll();
    };
    const handleKeypress = (e) => {
      const {
        onKeypress
      } = props;
      if (e.key === "Enter" || +e.charCode === 13) {
        if (props.type !== "textarea") {
          preventDefault(e);
        }
        if (props.type === "search") {
          blur();
        }
      }
      if (onKeypress && typeof onKeypress === "function") {
        onKeypress(e);
      }
    };
    if (type2 === "textarea") {
      return /* @__PURE__ */ React.createElement("textarea", {
        ref: inputRef,
        name,
        rows,
        className: classnames(controlClass),
        value,
        disabled: disabled2,
        readOnly: readonly,
        placeholder: placeholder || "",
        onBlur: handleBlur,
        onFocus: handleFocus,
        onClick: onClickInput,
        onChange: handleChange,
        onKeyPress: handleKeypress,
        onCompositionStart: handleCompositionStart,
        onCompositionUpdate: handleCompositionStart,
        onCompositionEnd: handleCompositionEnd
      });
    }
    let inputType = type2;
    let inputMode;
    if (type2 === "number") {
      inputType = "text";
      inputMode = "decimal";
    }
    if (type2 === "digit") {
      inputType = "tel";
      inputMode = "numeric";
    }
    return /* @__PURE__ */ React.createElement("input", {
      value,
      type: inputType,
      inputMode,
      ref: inputRef,
      name,
      className: classnames(controlClass),
      disabled: disabled2,
      readOnly: readonly,
      placeholder: placeholder || "",
      onBlur: handleBlur,
      onFocus: handleFocus,
      onClick: onClickInput,
      onChange: handleChange,
      onKeyPress: handleKeypress,
      onCompositionStart: handleCompositionStart,
      onCompositionUpdate: handleCompositionStart,
      onCompositionEnd: handleCompositionEnd
    });
  };
  const renderLeftIcon = () => {
    const {
      leftIcon,
      onClickLeftIcon
    } = props;
    if (!leftIcon)
      return null;
    return /* @__PURE__ */ React.createElement("div", {
      className: classnames(bem("left-icon")),
      onClick: onClickLeftIcon
    }, typeof leftIcon !== "string" ? leftIcon : /* @__PURE__ */ React.createElement(Icon, {
      name: leftIcon,
      classPrefix: props.iconPrefix
    }));
  };
  const renderRightIcon = () => {
    const {
      rightIcon,
      iconPrefix,
      onClickRightIcon
    } = props;
    if (!rightIcon)
      return null;
    return /* @__PURE__ */ React.createElement("div", {
      className: classnames(bem("right-icon")),
      onClick: onClickRightIcon
    }, typeof rightIcon === "string" ? /* @__PURE__ */ React.createElement(Icon, {
      name: rightIcon,
      classPrefix: iconPrefix
    }) : rightIcon);
  };
  const renderWordLimit = () => {
    const {
      value,
      showWordLimit,
      maxlength
    } = props;
    if (showWordLimit && maxlength) {
      const count = (value ? `${value}` : "").length;
      return /* @__PURE__ */ React.createElement("div", {
        className: classnames(bem("word-limit"))
      }, /* @__PURE__ */ React.createElement("span", {
        className: classnames(bem("word-num"))
      }, count), "/", maxlength);
    }
    return null;
  };
  const renderMessage = () => {
    const message = props.errorMessage;
    if (message) {
      const errorMessageAlign = getProp("errorMessageAlign");
      return /* @__PURE__ */ React.createElement("div", {
        className: classnames(bem("error-message", errorMessageAlign))
      }, message);
    }
    return null;
  };
  const renderIntro = () => {
    if (props.intro) {
      return /* @__PURE__ */ React.createElement("div", {
        className: classnames(bem("intro"))
      }, props.intro);
    }
    return null;
  };
  const renderTooltip = () => {
    const {
      tooltip
    } = props;
    if (tooltip) {
      let icon = /* @__PURE__ */ React.createElement(Icon, {
        name: "question-o"
      });
      let dialogProps = {
        message: tooltip
      };
      if (!(/* @__PURE__ */ React.isValidElement(tooltip) || typeof tooltip === "string")) {
        const _a = tooltip, {
          icon: customIcon
        } = _a, customDialogProps = __objRest(_a, [
          "icon"
        ]);
        icon = customIcon || icon;
        dialogProps = customDialogProps;
      }
      return /* @__PURE__ */ React.createElement("div", {
        className: classnames(bem("tooltip")),
        onClick: () => Dialog.show(dialogProps)
      }, icon);
    }
    return null;
  };
  const renderLabel = () => {
    const {
      label,
      colon
    } = props;
    if (label) {
      return /* @__PURE__ */ React.createElement(React.Fragment, null, label, colon && ":", renderTooltip());
    }
    return null;
  };
  const handleClear = (e) => {
    const {
      onClear,
      onChange
    } = props;
    inputRef.current.value = "";
    if (onChange && typeof onChange === "function") {
      onChange("");
    }
    if (onClear && typeof onClear === "function") {
      onClear(e);
    }
  };
  const {
    type,
    size,
    center,
    border,
    isLink,
    required,
    clickable,
    labelAlign,
    className,
    labelClass,
    arrowDirection,
    autosize,
    disabled,
    button,
    error
  } = props;
  return /* @__PURE__ */ React.createElement(Cell, {
    title: renderLabel(),
    size,
    icon: renderLeftIcon(),
    center,
    border,
    isLink,
    required,
    clickable,
    extra: props.extra,
    titleStyle: labelStyle(),
    valueClass: classnames(bem("value")),
    titleClass: classnames(bem("label", labelAlign), labelClass),
    arrowDirection,
    onClick: props == null ? void 0 : props.onClick,
    className: classnames(bem({
      error,
      disabled,
      [`label-${labelAlign}`]: labelAlign,
      "min-height": type === "textarea" && !autosize
    }), className)
  }, /* @__PURE__ */ React.createElement("div", {
    className: classnames(bem("body"))
  }, renderInput(), showClear && (typeof props.clearIcon === "string" ? /* @__PURE__ */ React.createElement(Icon, {
    className: classnames(bem("clear")),
    onTouchStart: handleClear,
    name: props.clearIcon,
    size: ICON_SIZE
  }) : props.clearIcon), renderRightIcon(), button && /* @__PURE__ */ React.createElement("div", {
    className: classnames(bem("button"))
  }, button)), renderWordLimit(), renderMessage(), renderIntro());
});
Field.defaultProps = {
  clearIcon: "clear",
  clearTrigger: "focus",
  formatTrigger: "onChange"
};
const FIELD_KEY = Symbol("field");
const FieldNamespace = Object.assign(Field, {
  [COMPONENT_TYPE_KEY]: FIELD_KEY
});
var stdin_default = FieldNamespace;
export {
  FIELD_KEY,
  stdin_default as default
};
