"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.MobilePreview = exports.ENotificationType = void 0;
const tslib_1 = require("tslib");
const image_1 = tslib_1.__importDefault(require("next/image"));
const react_1 = tslib_1.__importDefault(require("react"));
const icons_1 = require("../../../assets/icons");
const screens_1 = require("../../../assets/screens");
const Box_1 = require("../../Box");
const Iframe_1 = require("../../Iframe");
const TextV2_1 = require("../../TextV2");
var ENotificationType;
(function (ENotificationType) {
    ENotificationType["IN_APP"] = "in_app";
    ENotificationType["EMAIL"] = "email";
})(ENotificationType || (exports.ENotificationType = ENotificationType = {}));
const getScaledPreviewContent = (title, html) => {
    if (!html && !title) {
        return '';
    }
    return `
    <div>
      ${title ? `<h3>${title}</h3>` : ''}
      <div>${html || ''}</div>
    </div>
  `;
};
const MobilePreview = ({ content, description, isEvent = false, title, type = 'email', }) => {
    const isApp = type === 'in_app';
    const getImageUrl = () => {
        switch (type) {
            case 'in_app':
                return icons_1.PHXIcons.AppParentIcon;
            case 'email':
                return icons_1.PHXIcons.EmailIcon;
            default:
                return icons_1.PHXIcons.AppParentIcon;
        }
    };
    const getImageDetailUrl = () => {
        switch (type) {
            case 'in_app':
                return isEvent ? screens_1.PHXScreens.AppDetailEvent : screens_1.PHXScreens.NotiDetail;
            case 'email':
                return screens_1.PHXScreens.EmailDetail;
            default:
                return screens_1.PHXScreens.EmailDetail;
        }
    };
    const getDetailWrapperClass = () => {
        const baseClass = 'absolute flex flex-col overflow-hidden bg-white/90 p-3';
        if (isApp) {
            const positionClass = 'left-3 right-3 sm:left-4 sm:right-4';
            if (isEvent) {
                return `${baseClass} ${positionClass} bottom-0 top-[20%] rounded-t-2xl`;
            }
            return `${baseClass} ${positionClass} bottom-4 top-[45%] rounded-2xl`;
        }
        const positionClass = 'bottom-4 left-4 right-4 sm:left-6 sm:right-6 rounded-xl mx-1';
        return `${baseClass} ${positionClass} top-[24%]`;
    };
    return (react_1.default.createElement("div", { className: 'flex flex-col gap-6 px-4 md:px-8 lg:flex-row lg:gap-12 lg:px-12' },
        react_1.default.createElement("div", { className: 'relative w-full lg:w-1/2' },
            react_1.default.createElement(image_1.default, { alt: 'ImagePhone', className: 'h-auto w-full rounded-xl', height: 100, quality: 100, src: screens_1.PHXScreens.MobileScreen, width: 100 }),
            react_1.default.createElement("div", { className: 'absolute bottom-4 left-3 right-3 flex flex-col rounded-2xl bg-white/90 p-3 sm:left-4 sm:right-4' },
                react_1.default.createElement("div", { className: 'flex min-w-0 items-center gap-2' },
                    react_1.default.createElement(image_1.default, { alt: 'ParentApp', className: 'h-7 w-7 shrink-0 rounded-md object-cover sm:h-8 sm:w-8', height: 28, src: getImageUrl(), width: 28 }),
                    react_1.default.createElement("div", { className: 'min-w-0 flex-1 text-[10px]' },
                        react_1.default.createElement("div", { className: 'flex min-w-0 items-center gap-2' },
                            react_1.default.createElement("p", { className: 'min-w-0 flex-1 truncate font-semibold leading-3 sm:leading-4' }, title || 'Tiêu đề'),
                            react_1.default.createElement("p", { className: 'shrink-0 text-[10px] text-gray-500' }, "9:30 AM")),
                        react_1.default.createElement("p", { className: 'line-clamp-3 leading-3 text-gray-900 sm:line-clamp-4 sm:leading-4' }, description || 'Mô tả ngắn'))))),
        react_1.default.createElement("div", { className: 'relative w-full lg:w-1/2' },
            react_1.default.createElement(image_1.default, { alt: 'ImagePhoneDetail', className: 'h-auto w-full rounded-xl', height: 100, quality: 100, src: getImageDetailUrl(), width: 100 }),
            react_1.default.createElement("div", { className: getDetailWrapperClass() },
                isApp && !isEvent && (react_1.default.createElement(Box_1.PHXBox, { pb: 'snappy' },
                    react_1.default.createElement(TextV2_1.PHXTextV2, { color: 'primary', size: 'micro', weight: 'semibold' }, "Chi ti\u1EBFt th\u00F4ng b\u00E1o"))),
                react_1.default.createElement("div", { className: 'min-h-0 flex-1 overflow-hidden' },
                    react_1.default.createElement(Iframe_1.PHXIframe, { height: 'full', isMobile: true, srcDoc: getScaledPreviewContent(title, content) }))))));
};
exports.MobilePreview = MobilePreview;
//# sourceMappingURL=mobile-preview.js.map