"use strict";

exports.__esModule = true;
exports.RequestId = void 0;
var _designSystem = require("@wix/design-system");
var _react = _interopRequireWildcard(require("react"));
var _wixUiIconsCommon = require("@wix/wix-ui-icons-common");
var _jsxFileName = "/home/builduser/work/843658b9f44192f0/packages/cairo/dist/cjs/components/RequestId/RequestId.tsx";
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); }
const RequestId = props => {
  const {
    value,
    appearance,
    locale,
    dataHook = 'request-id'
  } = props;
  const firstValue = value.split(',')[0];
  const [messages, setMessages] = _react.default.useState(null);
  (0, _react.useEffect)(() => {
    const loadMessages = async () => {
      try {
        const module = await (specifier => new Promise(r => r(specifier)).then(s => _interopRequireWildcard(require(s))))(/* webpackChunkName: `request-id-locale-messages-[request]-json` */`./assets/locale/messages_${locale}.json`);
        setMessages(module.default);
      } catch (error) {
        setMessages(require('./assets/locale/messages_en.json'));
      }
    };
    loadMessages();
  }, [locale]);
  const [shown, setShown] = _react.default.useState(false);
  const openPopover = () => setShown(true);
  const closePopover = () => setShown(false);
  const appearanceStyle = (0, _react.useMemo)(() => {
    if (appearance === 'light') {
      return {
        infoIconColor: 'var(--wsr-color-D40, #868aa5)',
        textSize: 'small',
        textLight: true
      };
    }
    return {
      infoIconColor: 'var(--wsr-color-100, #116DFF)',
      textSize: 'tiny',
      textLight: false
    };
  }, [appearance]);
  return /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
    gap: "3px",
    dataHook: dataHook,
    justifyItems: "center",
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 80,
      columnNumber: 5
    }
  }, /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
    placeItems: "center",
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 81,
      columnNumber: 7
    }
  }, /*#__PURE__*/_react.default.createElement(_designSystem.Text, {
    size: appearanceStyle.textSize,
    weight: "thin",
    light: appearanceStyle.textLight,
    secondary: true,
    dataHook: "request-id-value",
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 82,
      columnNumber: 9
    }
  }, `Request ID: ${firstValue}`)), /*#__PURE__*/_react.default.createElement(_designSystem.Popover, {
    showArrow: true,
    animate: true,
    placement: "auto",
    shown: shown,
    onMouseEnter: () => openPopover(),
    onMouseLeave: () => closePopover(),
    dataHook: "request-id-popover",
    zIndex: 6000 // showToast z-index is 5500
    ,
    appendTo: "window",
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 92,
      columnNumber: 7
    }
  }, /*#__PURE__*/_react.default.createElement(_designSystem.Popover.Element, {
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 103,
      columnNumber: 9
    }
  }, /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 104,
      columnNumber: 11
    }
  }, /*#__PURE__*/_react.default.createElement(_designSystem.TextButton, {
    size: "small",
    as: "button",
    ariaLabel: "click me for details",
    dataHook: "request-id-trigger-element",
    prefixIcon: /*#__PURE__*/_react.default.createElement(_wixUiIconsCommon.InfoCircleSmall, {
      fill: appearanceStyle.infoIconColor,
      cursor: "default",
      __self: void 0,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 111,
        columnNumber: 17
      }
    }),
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 105,
      columnNumber: 13
    }
  }))), /*#__PURE__*/_react.default.createElement(_designSystem.Popover.Content, {
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 119,
      columnNumber: 9
    }
  }, /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
    padding: "24px 24px",
    width: 350,
    display: "block",
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 120,
      columnNumber: 11
    }
  }, /*#__PURE__*/_react.default.createElement("div", {
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 121,
      columnNumber: 13
    }
  }, /*#__PURE__*/_react.default.createElement(_designSystem.Text, {
    size: "small",
    skin: "standard",
    weight: "thin",
    dataHook: "request-id-description",
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 122,
      columnNumber: 15
    }
  }, messages == null ? void 0 : messages.description)), /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
    marginTop: 2,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 131,
      columnNumber: 13
    }
  }, /*#__PURE__*/_react.default.createElement(_designSystem.CopyClipboard, {
    value: value,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 132,
      columnNumber: 15
    }
  }, ({
    isCopied,
    copyToClipboard
  }) => /*#__PURE__*/_react.default.createElement(_designSystem.TextButton, {
    prefixIcon: /*#__PURE__*/_react.default.createElement(_wixUiIconsCommon.DuplicateSmall, {
      __self: void 0,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 135,
        columnNumber: 33
      }
    }),
    size: "small",
    onClick: () => copyToClipboard(),
    dataHook: "request-id-copy-button",
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 134,
      columnNumber: 19
    }
  }, isCopied ? messages == null ? void 0 : messages.copiedSuccess : messages == null ? void 0 : messages.cta)))))));
};
exports.RequestId = RequestId;
//# sourceMappingURL=RequestId.js.map