import { defineScreenshotScenario } from '@verbb/craft-screenshots/api';

import { seedFormieEmailPreviewForm } from '../../support/fixtures';

let editRoute = '/admin/formie/forms';

export default defineScreenshotScenario({
    id: 'formie-feature-tour-email-preview',
    output: 'feature-tour/formie-email-preview.png',
    route: () => editRoute,
    viewport: { width: 1400, height: 900, deviceScaleFactor: 2 },
    async setup(context) {
        editRoute = (await seedFormieEmailPreviewForm(context)).editRoute;
    },
    waitFor: [
        { type: 'loadState', state: 'networkidle' },
        { type: 'selector', selector: '[role="tab"]', state: 'visible', timeout: 30000 },
    ],
    steps: [
        { type: 'click', selector: '[role="tab"]:has-text("Email Notifications")' },
        { type: 'wait', waitFor: { type: 'selector', selector: '.fui-notification-row:not(.hidden)', state: 'visible', timeout: 30000 } },
        { type: 'click', selector: '.fui-notification-row:not(.hidden):has-text("Admin Notification") a.flex' },
        { type: 'wait', waitFor: { type: 'selector', selector: '.fui-edit-notification-modal', state: 'visible', timeout: 30000 } },
        { type: 'click', selector: '.fui-edit-notification-modal .fui-tab-item:has-text("Preview")' },
        { type: 'wait', waitFor: { type: 'selector', selector: '.fui-notification-preview', state: 'visible', timeout: 30000 } },
        { type: 'wait', waitFor: { type: 'timeout', ms: 500 } },
        {
            type: 'evaluate',
            expression: `
                const iframe = document.querySelector('.fui-email-body iframe');
                const iframeDocument = iframe?.contentDocument;

                if (iframeDocument) {
                    const style = iframeDocument.createElement('style');
                    style.textContent = 'body { font-family: Arial, sans-serif !important; font-size: 14px !important; line-height: 1.5 !important; } body * { font-size: inherit !important; }';
                    iframeDocument.head.appendChild(style);
                }

                const previewStyle = document.createElement('style');
                previewStyle.textContent = [
                    '.fui-edit-notification-modal .fui-modal-footer { display: none !important; }',
                    '.fui-edit-notification-modal .fui-modal-body { overflow: visible !important; }',
                    '.fui-email-preview { width: 680px !important; margin-inline: auto !important; overflow: hidden !important; }',
                    '.fui-email-footer { display: none !important; }',
                    '.fui-email-body { min-height: 0 !important; border-radius: 0 0 4px 4px !important; }',
                    '.fui-email-body iframe { height: 259px !important; }',
                ].join('\\n');
                document.head.appendChild(previewStyle);
            `,
        },
    ],
    target: { type: 'selector', selector: '.fui-email-preview' },
    caption: 'Formie’s real email preview for the seeded contact-form notification.',
    intent: 'Show the current notification preview generated by Formie rather than a designed email mockup.',
});