import React, { forwardRef } from 'react';
import { faTrashCan } from '@fortawesome/free-solid-svg-icons/faTrashCan';
import { FontAwesomeIcon } from '../font-awesome-icon';
import { Input } from '../input';
import { Button, ACCENT_TYPES } from '../button';
import { INPUT_TYPES, MESSAGE_DISPLAY_LOCATION, getErrorAriaAttributes, useDefaultValidationValues } from '../form-field';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
// Generate validity to NOT be inline, but still show
// red frames on inputs.
const generateNonInlineValidity = validity => ({
  ...validity,
  displayLocation: MESSAGE_DISPLAY_LOCATION.SUMMARY
});
const KeyValueInputs = /*#__PURE__*/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 = useDefaultValidationValues();
  const ariaAttrs = getErrorAriaAttributes({
    validity,
    id,
    validationValues
  });
  const disabled = isDisabled || disabledPairs?.[name] !== undefined && disabledPairs[name] === value;
  return /*#__PURE__*/_jsxs("div", {
    className: "kvp-inputs",
    "test-id": "kvp-inputs",
    children: [/*#__PURE__*/_jsx("span", {
      className: "key-input",
      children: /*#__PURE__*/_jsx(Input, {
        type: 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__*/_jsx("span", {
      className: "value-input",
      children: /*#__PURE__*/_jsx(Input, {
        type: 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__*/_jsx("span", {
      className: "kvp-delete-button",
      children: /*#__PURE__*/_jsx(Button, {
        accentType: ACCENT_TYPES.ROUND_ICON,
        onClick: onDelete,
        isDisabled: disabled,
        testId: "kvp-delete-button",
        "aria-label": deleteKeyValueText,
        children: /*#__PURE__*/_jsx(FontAwesomeIcon, {
          icon: faTrashCan
        })
      })
    })]
  });
});
KeyValueInputs.displayName = 'KeyValueInputs';
export { KeyValueInputs };