"use strict";
var import_InlineForm = require("../InlineForm.css");
const jsxRuntime = require("react/jsx-runtime");
const antd = require("antd");
const React = require("react");
const kit_Button = require("./Button.cjs");
const kit_Icon = require("./Icon.cjs");
const kit_Theme_UI = require("./Theme/UI.cjs");
require("./Theme/themeUtils.cjs");
require("./Theme/themes.cjs");
const formBase = "InlineForm_formBase_dc13d";
const buttonsContainer = "InlineForm_buttonsContainer_dc13d";
const formItemInput = "InlineForm_formItemInput_dc13d";
const readOnlyElement = "InlineForm_readOnlyElement_dc13d";
const css = {
  formBase,
  buttonsContainer,
  formItemInput,
  readOnlyElement
};
function InlineForm({
  label,
  children,
  valueFormatter,
  initialValue,
  value,
  isPassword = false,
  rules,
  required,
  testId = "",
  onSubmit,
  onEdit,
  onCancel,
  open,
  ...formProps
}) {
  const [isEditing, setIsEditing] = React.useState(false);
  const [hasFormError, setHasFormError] = React.useState(false);
  const [previousValue, setPreviousValue] = React.useState(initialValue);
  const [form] = antd.Form.useForm();
  const shouldCollapseText = React.useMemo(() => String(initialValue).length >= 45, [initialValue]);
  const inputCurrentValue = antd.Form.useWatch("input", form);
  const {
    themeSettings: { className: themeClass }
  } = kit_Theme_UI.useTheme();
  const classes = [css.formBase, themeClass];
  const readOnlyText = React.useMemo(() => {
    let textValue = valueFormatter ? valueFormatter(value ?? initialValue) : String(value ?? initialValue);
    if (value === void 0) {
      if (inputCurrentValue !== void 0 && inputCurrentValue !== initialValue)
        textValue = valueFormatter ? valueFormatter(inputCurrentValue) : inputCurrentValue;
    }
    if (isPassword)
      return textValue.replace(/\S/g, "*");
    if (shouldCollapseText)
      return textValue.slice(0, 50).concat("...");
    return textValue;
  }, [shouldCollapseText, value, initialValue, isPassword, inputCurrentValue, valueFormatter]);
  React.useEffect(() => {
    if (value !== void 0) {
      form.setFieldValue("input", value);
    } else {
      form.setFieldValue("input", initialValue);
    }
  }, [initialValue, value, form]);
  React.useEffect(() => {
    if (open !== void 0)
      setIsEditing(open);
  }, [open]);
  React.useEffect(() => {
    let mounted = true;
    if (isEditing) {
      (async () => {
        try {
          await form.validateFields(["input"]);
          if (mounted)
            setHasFormError(false);
        } catch {
          if (mounted)
            setHasFormError(true);
        }
      })();
    }
    return () => {
      mounted = false;
    };
  }, [inputCurrentValue, isEditing, form]);
  const handleEdit = React.useCallback(() => {
    if (open === void 0)
      setIsEditing(true);
    onEdit == null ? void 0 : onEdit();
  }, [open, onEdit]);
  const handleCancel = React.useCallback(() => {
    form.resetFields();
    form.setFieldValue("input", previousValue);
    if (open === void 0)
      setIsEditing(false);
    onCancel == null ? void 0 : onCancel();
  }, [open, onCancel, form, previousValue]);
  const handleConfirm = React.useCallback(async () => {
    if (form.getFieldError("input").length)
      return;
    form.submit();
    try {
      const formValues = await form.validateFields();
      setPreviousValue(formValues.input);
      if (open === void 0)
        setIsEditing(false);
      onSubmit == null ? void 0 : onSubmit(formValues.input);
    } catch (error) {
      form.setFieldValue("input", initialValue);
    }
  }, [form, initialValue, open, onSubmit]);
  return /* @__PURE__ */ jsxRuntime.jsxs(
    antd.Form,
    {
      className: classes.join(" "),
      colon: false,
      form,
      layout: "inline",
      requiredMark: false,
      ...formProps,
      children: [
        /* @__PURE__ */ jsxRuntime.jsx("label", { children: label }),
        /* @__PURE__ */ jsxRuntime.jsx(
          antd.Form.Item,
          {
            className: css.formItemInput,
            initialValue,
            name: "input",
            required,
            rules,
            validateTrigger: ["onSubmit", "onChange"],
            children: isEditing ? children : /* @__PURE__ */ jsxRuntime.jsx("span", { className: css.readOnlyElement, "data-testid": `value-${testId}`, children: readOnlyText })
          }
        ),
        /* @__PURE__ */ jsxRuntime.jsx("div", { className: css.buttonsContainer, children: isEditing ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
          /* @__PURE__ */ jsxRuntime.jsx(
            kit_Button,
            {
              "data-testid": `submit-${testId}`,
              disabled: hasFormError,
              icon: /* @__PURE__ */ jsxRuntime.jsx(kit_Icon.default, { name: "checkmark", title: "confirm" }),
              type: "primary",
              onClick: handleConfirm
            }
          ),
          /* @__PURE__ */ jsxRuntime.jsx(
            kit_Button,
            {
              "data-testid": `reset-${testId}`,
              icon: /* @__PURE__ */ jsxRuntime.jsx(kit_Icon.default, { name: "close", size: "tiny", title: "cancel" }),
              type: "default",
              onClick: handleCancel
            }
          )
        ] }) : /* @__PURE__ */ jsxRuntime.jsx(
          kit_Button,
          {
            "data-testid": `edit-${testId}`,
            icon: /* @__PURE__ */ jsxRuntime.jsx(kit_Icon.default, { name: "pencil", size: "small", title: "Edit" }),
            type: "default",
            onClick: handleEdit
          }
        ) })
      ]
    }
  );
}
module.exports = InlineForm;
