import Image from 'next/image';
import React from 'react';
import { PHXIcons } from '../../../assets/icons';
import { PHXScreens } from '../../../assets/screens';
import { PHXBox } from '../../Box';
import { PHXIframe } from '../../Iframe';
import { PHXTextV2 } from '../../TextV2';
export var ENotificationType;
(function (ENotificationType) {
    ENotificationType["IN_APP"] = "in_app";
    ENotificationType["EMAIL"] = "email";
})(ENotificationType || (ENotificationType = {}));
const getScaledPreviewContent = (title, html) => {
    if (!html && !title) {
        return '';
    }
    return `
    <div>
      ${title ? `<h3>${title}</h3>` : ''}
      <div>${html || ''}</div>
    </div>
  `;
};
export const MobilePreview = ({ content, description, isEvent = false, title, type = 'email', }) => {
    const isApp = type === 'in_app';
    const getImageUrl = () => {
        switch (type) {
            case 'in_app':
                return PHXIcons.AppParentIcon;
            case 'email':
                return PHXIcons.EmailIcon;
            default:
                return PHXIcons.AppParentIcon;
        }
    };
    const getImageDetailUrl = () => {
        switch (type) {
            case 'in_app':
                return isEvent ? PHXScreens.AppDetailEvent : PHXScreens.NotiDetail;
            case 'email':
                return PHXScreens.EmailDetail;
            default:
                return 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.createElement("div", { className: 'flex flex-col gap-6 px-4 md:px-8 lg:flex-row lg:gap-12 lg:px-12' },
        React.createElement("div", { className: 'relative w-full lg:w-1/2' },
            React.createElement(Image, { alt: 'ImagePhone', className: 'h-auto w-full rounded-xl', height: 100, quality: 100, src: PHXScreens.MobileScreen, width: 100 }),
            React.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.createElement("div", { className: 'flex min-w-0 items-center gap-2' },
                    React.createElement(Image, { 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.createElement("div", { className: 'min-w-0 flex-1 text-[10px]' },
                        React.createElement("div", { className: 'flex min-w-0 items-center gap-2' },
                            React.createElement("p", { className: 'min-w-0 flex-1 truncate font-semibold leading-3 sm:leading-4' }, title || 'Tiêu đề'),
                            React.createElement("p", { className: 'shrink-0 text-[10px] text-gray-500' }, "9:30 AM")),
                        React.createElement("p", { className: 'line-clamp-3 leading-3 text-gray-900 sm:line-clamp-4 sm:leading-4' }, description || 'Mô tả ngắn'))))),
        React.createElement("div", { className: 'relative w-full lg:w-1/2' },
            React.createElement(Image, { alt: 'ImagePhoneDetail', className: 'h-auto w-full rounded-xl', height: 100, quality: 100, src: getImageDetailUrl(), width: 100 }),
            React.createElement("div", { className: getDetailWrapperClass() },
                isApp && !isEvent && (React.createElement(PHXBox, { pb: 'snappy' },
                    React.createElement(PHXTextV2, { color: 'primary', size: 'micro', weight: 'semibold' }, "Chi ti\u1EBFt th\u00F4ng b\u00E1o"))),
                React.createElement("div", { className: 'min-h-0 flex-1 overflow-hidden' },
                    React.createElement(PHXIframe, { height: 'full', isMobile: true, srcDoc: getScaledPreviewContent(title, content) }))))));
};
//# sourceMappingURL=mobile-preview.js.map