import _slicedToArray from "@babel/runtime-corejs3/helpers/slicedToArray";
import _styled from "@emotion/styled/base";

function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }

import React, { useState } from "react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faTimes } from "@fortawesome/free-solid-svg-icons";
import { noop } from "../../utils";
import { jsx as ___EmotionJSX } from "@emotion/react";

var IconRedactStyled = _styled("span", process.env.NODE_ENV === "production" ? {
  target: "ei8kqim0"
} : {
  target: "ei8kqim0",
  label: "IconRedactStyled"
})(process.env.NODE_ENV === "production" ? {
  name: "vb1e22",
  styles: "transition:color 0.2s ease-out;color:#dc2626;&:hover{color:#b91c1c;}"
} : {
  name: "vb1e22",
  styles: "transition:color 0.2s ease-out;color:#dc2626;&:hover{color:#b91c1c;}",
  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL2NvbW1vbi9SZWRhY3RhYmxlVmFsdWUudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQU1vQyIsImZpbGUiOiIuLi8uLi8uLi8uLi9zcmMvY29tcG9uZW50cy9jb21tb24vUmVkYWN0YWJsZVZhbHVlLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBSZWFjdCwgeyBGdW5jdGlvbkNvbXBvbmVudCwgdXNlU3RhdGUgfSBmcm9tIFwicmVhY3RcIjtcbmltcG9ydCB7IEZvbnRBd2Vzb21lSWNvbiB9IGZyb20gXCJAZm9ydGF3ZXNvbWUvcmVhY3QtZm9udGF3ZXNvbWVcIjtcbmltcG9ydCB7IGZhVGltZXMgfSBmcm9tIFwiQGZvcnRhd2Vzb21lL2ZyZWUtc29saWQtc3ZnLWljb25zXCI7XG5pbXBvcnQgc3R5bGVkIGZyb20gXCJAZW1vdGlvbi9zdHlsZWRcIjtcbmltcG9ydCB7IG5vb3AgfSBmcm9tIFwiLi4vLi4vdXRpbHNcIjtcblxuY29uc3QgSWNvblJlZGFjdFN0eWxlZCA9IHN0eWxlZC5zcGFuYFxuICB0cmFuc2l0aW9uOiBjb2xvciAwLjJzIGVhc2Utb3V0O1xuICBjb2xvcjogI2RjMjYyNjsgLy8gdGV4dC1yZWQtNjAwICh0YWlsd2luZClcblxuICAmOmhvdmVyIHtcbiAgICBjb2xvcjogI2I5MWMxYzsgLy8gdGV4dC1yZWQtNzAwICh0YWlsd2luZClcbiAgfVxuYDtcblxuY29uc3QgSWNvblJlZGFjdDogRnVuY3Rpb25Db21wb25lbnQgPSAoKSA9PiB7XG4gIHJldHVybiAoXG4gICAgPEljb25SZWRhY3RTdHlsZWQ+XG4gICAgICA8Rm9udEF3ZXNvbWVJY29uIHRpdGxlPVwiUmVkYWN0IGRlZmF1bHQgaWNvblwiIGljb249e2ZhVGltZXN9IC8+XG4gICAgPC9JY29uUmVkYWN0U3R5bGVkPlxuICApO1xufTtcblxuZXhwb3J0IGludGVyZmFjZSBSZWRhY3RWYWx1ZVByb3BzIHtcbiAgdmFsdWU/OiBzdHJpbmcgfCBudW1iZXI7XG4gIG9uUmVkYWN0aW9uUmVxdWVzdGVkPzogKCkgPT4gdm9pZDtcbiAgZWRpdGFibGU/OiBib29sZWFuO1xuICBpY29uUmVkYWN0PzogUmVhY3QuUmVhY3RFbGVtZW50O1xufVxuXG4vKipcbiAqIFJlZGFjdGFibGVWYWx1ZSBjb21wb25lbnQgaXMgYWxtb3N0IGEgZHVwbGljYXRlIG9mIE9iZnVzY2F0YWJsZVZhbHVlIGNvbXBvbmVudFxuICogT2JmdXNjYXRhYmxlVmFsdWUgY29tcG9uZW50IHN0YXJ0ZWQgZnJvbSBPcGVuQ2VydHMsIGFuZCBtYXkgYmUgaW4gdXNlIG9uIGV4aXN0aW5nIGNlcnRpZmljYXRlcywgaGVuY2Ugd2UgZG8gbm90IHdhbnQgdG8gbWVkZGxlIHdpdGggdGhlIGV4aXN0aW5nIGZ1bmN0aW9uYWxpdHlcbiAqIFJlZGFjdGFibGVWYWx1ZSBjb21wb25lbnQgZGlzcGxheXMgYSB2YWx1ZSBhbmQgYSBjcm9zcyB3aGVuIGVkaXRhYmxlIHByb3BzIGlzIHNldCB0byB0cnVlLCBhbGxvd3MgY3VzdG9tIHJlZGFjdCBpY29uLCBoaW50cyBhdCByZWRhY3RlZCB2YWx1ZXNcbiAqL1xuZXhwb3J0IGNvbnN0IFJlZGFjdGFibGVWYWx1ZTogRnVuY3Rpb25Db21wb25lbnQ8UmVkYWN0VmFsdWVQcm9wcz4gPSAoe1xuICB2YWx1ZSxcbiAgb25SZWRhY3Rpb25SZXF1ZXN0ZWQgPSBub29wLFxuICBlZGl0YWJsZSA9IGZhbHNlLFxuICBpY29uUmVkYWN0ID0gPEljb25SZWRhY3QgLz4sXG59KSA9PiB7XG4gIGNvbnN0IFtpc1JlZGFjdGVkLCBzZXRSZWRhY3RlZF0gPSB1c2VTdGF0ZShmYWxzZSk7XG5cbiAgaWYgKGlzUmVkYWN0ZWQpIHJldHVybiA8c3BhbiBzdHlsZT17eyBkaXNwbGF5OiBcImlubGluZS1ibG9ja1wiLCBjb2xvcjogXCIjNDU0QjUwXCIgfX0+KipSZWRhY3RlZCoqPC9zcGFuPjtcbiAgaWYgKCF2YWx1ZSkgcmV0dXJuIDxzcGFuIHN0eWxlPXt7IGRpc3BsYXk6IFwiaW5saW5lLWJsb2NrXCIsIGNvbG9yOiBcIiM0NTRCNTBcIiB9fT4qKkZpZWxkIHZhbHVlIGRvZXMgbm90IGV4aXN0cyoqPC9zcGFuPjtcblxuICByZXR1cm4gKFxuICAgIDw+XG4gICAgICA8c3BhbiBzdHlsZT17eyBkaXNwbGF5OiBcImlubGluZS1ibG9ja1wiLCBtYXJnaW5SaWdodDogXCI4cHhcIiB9fT57dmFsdWV9PC9zcGFuPlxuICAgICAge2VkaXRhYmxlICYmIChcbiAgICAgICAgPHNwYW5cbiAgICAgICAgICB0aXRsZT1cIlJlZGFjdCBoYW5kbGVyXCJcbiAgICAgICAgICBzdHlsZT17eyBkaXNwbGF5OiBcImlubGluZS1ibG9ja1wiLCBjdXJzb3I6IFwicG9pbnRlclwiIH19XG4gICAgICAgICAgb25DbGljaz17KCkgPT4ge1xuICAgICAgICAgICAgaWYgKGVkaXRhYmxlKSB7XG4gICAgICAgICAgICAgIG9uUmVkYWN0aW9uUmVxdWVzdGVkKCk7XG4gICAgICAgICAgICAgIHNldFJlZGFjdGVkKHRydWUpO1xuICAgICAgICAgICAgfVxuICAgICAgICAgIH19XG4gICAgICAgID5cbiAgICAgICAgICB7aWNvblJlZGFjdH1cbiAgICAgICAgPC9zcGFuPlxuICAgICAgKX1cbiAgICA8Lz5cbiAgKTtcbn07XG4iXX0= */",
  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
});

var IconRedact = function IconRedact() {
  return ___EmotionJSX(IconRedactStyled, null, ___EmotionJSX(FontAwesomeIcon, {
    title: "Redact default icon",
    icon: faTimes
  }));
};

/**
 * RedactableValue component is almost a duplicate of ObfuscatableValue component
 * ObfuscatableValue component started from OpenCerts, and may be in use on existing certificates, hence we do not want to meddle with the existing functionality
 * RedactableValue component displays a value and a cross when editable props is set to true, allows custom redact icon, hints at redacted values
 */
export var RedactableValue = function RedactableValue(_ref) {
  var value = _ref.value,
      _ref$onRedactionReque = _ref.onRedactionRequested,
      onRedactionRequested = _ref$onRedactionReque === void 0 ? noop : _ref$onRedactionReque,
      _ref$editable = _ref.editable,
      editable = _ref$editable === void 0 ? false : _ref$editable,
      _ref$iconRedact = _ref.iconRedact,
      iconRedact = _ref$iconRedact === void 0 ? ___EmotionJSX(IconRedact, null) : _ref$iconRedact;

  var _useState = useState(false),
      _useState2 = _slicedToArray(_useState, 2),
      isRedacted = _useState2[0],
      setRedacted = _useState2[1];

  if (isRedacted) return ___EmotionJSX("span", {
    style: {
      display: "inline-block",
      color: "#454B50"
    }
  }, "**Redacted**");
  if (!value) return ___EmotionJSX("span", {
    style: {
      display: "inline-block",
      color: "#454B50"
    }
  }, "**Field value does not exists**");
  return ___EmotionJSX(React.Fragment, null, ___EmotionJSX("span", {
    style: {
      display: "inline-block",
      marginRight: "8px"
    }
  }, value), editable && ___EmotionJSX("span", {
    title: "Redact handler",
    style: {
      display: "inline-block",
      cursor: "pointer"
    },
    onClick: function onClick() {
      if (editable) {
        onRedactionRequested();
        setRedacted(true);
      }
    }
  }, iconRedact));
};
//# sourceMappingURL=RedactableValue.js.map