import { memo } from 'react';
import classnames from 'classnames';
import { isPresent } from '@bigbinary/neeto-cist';
import withT from '@bigbinary/neeto-commons-frontend/react-utils/withT';
import EditorContent from '@bigbinary/neeto-editor/EditorContent';
import Typography from '@bigbinary/neetoui/Typography';
import Button from '@bigbinary/neetoui/Button';
import { P as PropTypes } from './index-DAYCJu79.js';
import { jsxs, jsx } from 'react/jsx-runtime';
import './_commonjsHelpers-BFTU3MAI.js';

var MemoizedEditorContent = /*#__PURE__*/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__*/jsxs("div", {
    "data-cy": "email-preview-card",
    "data-testid": "email-preview",
    className: classnames("neeto-ui-border-gray-300 neeto-ui-shadow-m neeto-ui-bg-white neeto-ui-theme--light neeto-notification-email-wrapper__preview flex flex-1 flex-col border", className),
    children: [/*#__PURE__*/jsxs("div", {
      className: "neeto-ui-border-gray-300 flex flex-col gap-y-3 border-b p-6",
      children: [/*#__PURE__*/jsxs("div", {
        className: "flex gap-2",
        "data-cy": "email-send-to-preview",
        "data-testid": "email-to-block",
        children: [/*#__PURE__*/jsxs(Typography, {
          className: "neeto-ui-text-gray-500",
          lineHeight: "normal",
          style: "body2",
          children: [t("neetoMolecules.emailPreview.to"), ":"]
        }), isPresent(to) ? /*#__PURE__*/jsx(Typography, {
          className: "neeto-ui-text-gray-800 min-w-0 flex-grow break-words",
          lineHeight: "normal",
          style: "body2",
          children: to.join(", ")
        }) : /*#__PURE__*/jsx("div", {
          className: "neeto-ui-bg-gray-300 neeto-ui-rounded-full mt-2 h-2 w-40"
        })]
      }), from && /*#__PURE__*/jsxs("div", {
        className: "neeto-ui-border-gray-200 flex items-center gap-2 border-t pt-3",
        children: [/*#__PURE__*/jsxs(Typography, {
          className: "neeto-ui-text-gray-500",
          lineHeight: "normal",
          style: "body2",
          children: [t("neetoMolecules.emailPreview.from"), ":"]
        }), /*#__PURE__*/jsx(Typography, {
          className: "neeto-ui-text-gray-800 min-w-0 flex-grow break-words",
          "data-cy": "email-send-from-preview",
          lineHeight: "normal",
          style: "body2",
          children: from
        })]
      }), /*#__PURE__*/jsxs("div", {
        className: "neeto-ui-border-gray-200 flex items-center gap-2 border-t pt-3",
        children: [/*#__PURE__*/jsxs(Typography, {
          className: "neeto-ui-text-gray-500",
          lineHeight: "normal",
          style: "body2",
          children: [t("neetoMolecules.emailPreview.subject"), ":"]
        }), /*#__PURE__*/jsx(Typography, {
          className: "neeto-ui-text-gray-800 min-w-0 flex-grow break-words",
          "data-cy": "email-subject-preview",
          lineHeight: "normal",
          style: "body2",
          children: subject || /*#__PURE__*/jsx("span", {
            className: "neeto-ui-bg-gray-300 neeto-ui-rounded-full h-2 w-40"
          })
        })]
      })]
    }), /*#__PURE__*/jsxs("div", {
      className: "neeto-ui-text-gray-800 flex flex-1 flex-col justify-between gap-y-6 p-6 pr-10 text-base leading-relaxed",
      "data-cy": "email-body-preview-container",
      children: [body ? /*#__PURE__*/jsx(MemoizedEditorContent, {
        content: body
      }) : /*#__PURE__*/jsxs("div", {
        className: "flex flex-col gap-y-4",
        children: [/*#__PURE__*/jsx("div", {
          className: "neeto-ui-bg-gray-300 neeto-ui-rounded-full h-2 w-48 max-w-full md:w-80"
        }), /*#__PURE__*/jsx("div", {
          className: "neeto-ui-bg-gray-300 neeto-ui-rounded-full h-2 w-40 max-w-full md:w-72"
        }), /*#__PURE__*/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__*/jsx("div", {
        className: "mt-6 flex w-full items-center justify-center",
        children: /*#__PURE__*/jsx(Button, {
          className: "pointer-events-none",
          label: actionButtonText
        })
      }), logo && /*#__PURE__*/jsx("img", {
        alt: t("neetoMolecules.emailPreview.logoAltText"),
        className: "h-20 w-36 object-cover",
        "data-cy": "company-logo-preview",
        src: logo
      })]
    })]
  });
});
EmailPreview.propTypes = {
  /**
   * The value of the send-to field.
   */
  to: PropTypes.arrayOf(PropTypes.string),
  /**
   * The value of the send-from field.
   */
  from: PropTypes.string,
  /**
   * The subject of the email.
   */
  subject: PropTypes.string,
  /**
   * The body of the email.
   */
  body: PropTypes.string,
  /**
   * The text to be shown in the action button.
   */
  actionButtonText: PropTypes.string,
  /**
   * Source link for the company logo.
   */
  logo: PropTypes.string,
  /**
   * To pass custom content that will be rendered above the action button.
   */
  customContent: PropTypes.string
};

export { EmailPreview as default };
//# sourceMappingURL=EmailPreview.js.map
