'use strict';

var React = require('react');
var classnames = require('classnames');
var neetoCist = require('@bigbinary/neeto-cist');
var withT = require('@bigbinary/neeto-commons-frontend/react-utils/withT');
var EditorContent = require('@bigbinary/neeto-editor/EditorContent');
var Typography = require('@bigbinary/neetoui/Typography');
var Button = require('@bigbinary/neetoui/Button');
var index = require('./index-JY2zVpnv.js');
var jsxRuntime = require('react/jsx-runtime');
require('./_commonjsHelpers-BJu3ubxk.js');

function _interopNamespaceDefault(e) {
  var n = Object.create(null);
  if (e) {
    Object.keys(e).forEach(function (k) {
      if (k !== 'default') {
        var d = Object.getOwnPropertyDescriptor(e, k);
        Object.defineProperty(n, k, d.get ? d : {
          enumerable: true,
          get: function () { return e[k]; }
        });
      }
    });
  }
  n.default = e;
  return Object.freeze(n);
}

var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);

var _rect, _path;
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
var SvgAvatarPlaceholder = function SvgAvatarPlaceholder(props) {
  return /*#__PURE__*/React__namespace.createElement("svg", _extends({
    xmlns: "http://www.w3.org/2000/svg",
    width: 32,
    height: 32,
    fill: "none"
  }, props), _rect || (_rect = /*#__PURE__*/React__namespace.createElement("rect", {
    width: 31.558,
    height: 31.558,
    fill: "#F1F3F4",
    rx: 15.779
  })), _path || (_path = /*#__PURE__*/React__namespace.createElement("path", {
    fill: "#C2C8CC",
    d: "M15.778 15.778a2.892 2.892 0 1 0 0-5.786 2.892 2.892 0 1 0 0 5.786m0 1.446c-1.931 0-5.786.97-5.786 2.893v1.447h11.572v-1.447c0-1.924-3.855-2.893-5.786-2.893"
  })));
};

var MemoizedEditorContent = /*#__PURE__*/React.memo(EditorContent);
var EmailPreview = withT(function (_ref) {
  var t = _ref.t,
    _ref$to = _ref.to,
    to = _ref$to === void 0 ? [] : _ref$to,
    from = _ref.from,
    subject = _ref.subject,
    body = _ref.body,
    actionButtonText = _ref.actionButtonText,
    logo = _ref.logo,
    _ref$className = _ref.className,
    className = _ref$className === void 0 ? "" : _ref$className,
    customContent = _ref.customContent;
  return /*#__PURE__*/jsxRuntime.jsxs("div", {
    "data-testid": "email-preview-card",
    className: classnames("neeto-ui-bg-white neeto-ui-rounded-lg neeto-ui-theme--light neeto-notification-email-wrapper__preview relative flex flex-1 flex-col px-6 py-8", className),
    children: [/*#__PURE__*/jsxRuntime.jsx("div", {
      className: "neeto-molecules-email-preview-ribbon",
      children: t("neetoMolecules.emailPreview.previewMessage")
    }), /*#__PURE__*/jsxRuntime.jsxs("div", {
      className: "w-full pb-4",
      children: [/*#__PURE__*/jsxRuntime.jsx(Typography, {
        className: "neeto-ui-text-gray-800 min-w-0 grow space-x-2 break-words",
        "data-testid": "email-subject-preview",
        lineHeight: "normal",
        style: "h4",
        children: /*#__PURE__*/jsxRuntime.jsx("span", {
          children: subject || /*#__PURE__*/jsxRuntime.jsx("span", {
            className: "neeto-ui-bg-gray-300 neeto-ui-rounded-full h-2 w-40"
          })
        })
      }), /*#__PURE__*/jsxRuntime.jsxs("div", {
        className: "mt-4 flex items-center gap-2",
        children: [/*#__PURE__*/jsxRuntime.jsx("div", {
          className: "shrink-0",
          children: /*#__PURE__*/jsxRuntime.jsx(SvgAvatarPlaceholder, {})
        }), /*#__PURE__*/jsxRuntime.jsxs("div", {
          className: "neeto-ui-flex-col flex gap-1",
          children: [neetoCist.isPresent(from) ? /*#__PURE__*/jsxRuntime.jsx(Typography, {
            style: "h6",
            weight: "medium",
            children: from
          }) : /*#__PURE__*/jsxRuntime.jsxs("div", {
            className: "flex gap-2",
            children: [/*#__PURE__*/jsxRuntime.jsx("span", {
              className: "neeto-ui-bg-gray-100 neeto-ui-rounded-full h-2 w-24"
            }), /*#__PURE__*/jsxRuntime.jsx("span", {
              className: "neeto-ui-bg-gray-100 neeto-ui-rounded-full h-2 w-24"
            })]
          }), neetoCist.isPresent(to) ? /*#__PURE__*/jsxRuntime.jsx(Typography, {
            className: "neeto-ui-text-gray-500 line-clamp-1",
            "data-testid": "email-to-block",
            style: "nano",
            children: to.join(", ")
          }) : /*#__PURE__*/jsxRuntime.jsx("span", {
            className: "neeto-ui-bg-gray-100 neeto-ui-rounded-full h-2 w-16",
            "data-testid": "email-to-block"
          })]
        })]
      })]
    }), /*#__PURE__*/jsxRuntime.jsx("div", {
      className: "neeto-ui-rounded neeto-ui-bg-gray-100 flex flex-1 flex-col justify-between gap-y-6 px-6 py-4 text-base leading-relaxed",
      "data-testid": "email-body-preview-container",
      children: /*#__PURE__*/jsxRuntime.jsxs("div", {
        className: "neeto-ui-bg-white w-full p-6 md:p-8 2xl:mx-auto 2xl:max-w-lg",
        children: [body ? /*#__PURE__*/jsxRuntime.jsx(MemoizedEditorContent, {
          className: "whitespace-normal",
          content: body
        }) : /*#__PURE__*/jsxRuntime.jsxs("div", {
          className: "flex flex-col gap-y-4",
          children: [/*#__PURE__*/jsxRuntime.jsx("div", {
            className: "neeto-ui-bg-gray-300 neeto-ui-rounded-full h-2 w-48 max-w-full md:w-80"
          }), /*#__PURE__*/jsxRuntime.jsx("div", {
            className: "neeto-ui-bg-gray-300 neeto-ui-rounded-full h-2 w-40 max-w-full md:w-72"
          }), /*#__PURE__*/jsxRuntime.jsx("div", {
            className: "neeto-ui-bg-gray-300 neeto-ui-rounded-full h-2 w-48 max-w-full md:w-80"
          })]
        }), customContent && customContent, actionButtonText && /*#__PURE__*/jsxRuntime.jsx("div", {
          className: "mt-6 flex w-full items-center justify-center",
          children: /*#__PURE__*/jsxRuntime.jsx(Button, {
            className: "pointer-events-none",
            label: actionButtonText
          })
        }), logo && /*#__PURE__*/jsxRuntime.jsx("img", {
          alt: t("neetoMolecules.emailPreview.logoAltText"),
          className: "h-20 w-36 object-cover",
          "data-testid": "company-logo-preview",
          src: logo
        })]
      })
    })]
  });
});
EmailPreview.propTypes = {
  /**
   * The value of the send-to field.
   */
  to: index.PropTypes.arrayOf(index.PropTypes.string),
  /**
   * The value of the send-from field.
   */
  from: index.PropTypes.string,
  /**
   * The subject of the email.
   */
  subject: index.PropTypes.string,
  /**
   * The body of the email.
   */
  body: index.PropTypes.string,
  /**
   * The text to be shown in the action button.
   */
  actionButtonText: index.PropTypes.string,
  /**
   * Source link for the company logo.
   */
  logo: index.PropTypes.string,
  /**
   * To pass custom content that will be rendered above the action button.
   */
  customContent: index.PropTypes.string
};

module.exports = EmailPreview;
//# sourceMappingURL=EmailPreview.js.map
