"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.KeyValueInputs = void 0;
var _react = _interopRequireWildcard(require("react"));
var _faTrashCan = require("@fortawesome/free-solid-svg-icons/faTrashCan");
var _fontAwesomeIcon = require("../font-awesome-icon");
var _input = require("../input");
var _button = require("../button");
var _formField = require("../form-field");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
// Generate validity to NOT be inline, but still show
// red frames on inputs.
const generateNonInlineValidity = validity => ({
  ...validity,
  displayLocation: _formField.MESSAGE_DISPLAY_LOCATION.SUMMARY
});
const KeyValueInputs = exports.KeyValueInputs = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
  const {
    name,
    value = '',
    isDisabled = false,
    disabledPairs,
    onChange = () => {},
    onDelete = () => {},
    validity = {},
    deleteKeyValueText,
    keyLabel,
    valueLabel,
    keyInputAriaLabel,
    valueInputAriaLabel,
    id
  } = props;
  const generatedValidity = generateNonInlineValidity(validity);
  const validationValues = (0, _formField.useDefaultValidationValues)();
  const ariaAttrs = (0, _formField.getErrorAriaAttributes)({
    validity,
    id,
    validationValues
  });
  const disabled = isDisabled || disabledPairs?.[name] !== undefined && disabledPairs[name] === value;
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
    className: "kvp-inputs",
    "test-id": "kvp-inputs",
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
      className: "key-input",
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_input.Input, {
        type: _formField.INPUT_TYPES.TEXT,
        value: name,
        isDisabled: disabled,
        onChange: ({
          target
        }) => onChange({
          name: target.value,
          value
        }),
        "test-id": "kvp-key-input",
        validity: generatedValidity,
        touched: true,
        "aria-label": keyInputAriaLabel || keyLabel,
        ref: ref,
        ...ariaAttrs
      })
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
      className: "value-input",
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_input.Input, {
        type: _formField.INPUT_TYPES.TEXT,
        value: value,
        isDisabled: disabled,
        onChange: ({
          target
        }) => onChange({
          name,
          value: target.value
        }),
        "test-id": "kvp-value-input",
        validity: generatedValidity,
        touched: true,
        "aria-label": valueInputAriaLabel || valueLabel,
        ...ariaAttrs
      })
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
      className: "kvp-delete-button",
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.Button, {
        accentType: _button.ACCENT_TYPES.ROUND_ICON,
        onClick: onDelete,
        isDisabled: disabled,
        testId: "kvp-delete-button",
        "aria-label": deleteKeyValueText,
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_fontAwesomeIcon.FontAwesomeIcon, {
          icon: _faTrashCan.faTrashCan
        })
      })
    })]
  });
});
KeyValueInputs.displayName = 'KeyValueInputs';