'use client';
import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
import { reduceFieldsToValues } from 'payload/shared';
import React, { useEffect } from 'react';
import { useAllFormFields } from '../../../forms/Form/context.js';
import { useDocumentEvents } from '../../../providers/DocumentEvents/index.js';
import { useDocumentInfo } from '../../../providers/DocumentInfo/index.js';
import { useLivePreviewContext } from '../../../providers/LivePreview/context.js';
import { useLocale } from '../../../providers/Locale/index.js';
import { ShimmerEffect } from '../../ShimmerEffect/index.js';
import { DeviceContainer } from '../Device/index.js';
import { IFrame } from '../IFrame/index.js';
import { LivePreviewToolbar } from '../Toolbar/index.js';
import './index.scss';
const baseClass = 'live-preview-window';
export const LivePreviewWindow = (props)=>{
    const { appIsReady, breakpoint, iframeRef, isLivePreviewing, loadedURL, popupRef, previewWindowType, url } = useLivePreviewContext();
    const locale = useLocale();
    const { mostRecentUpdate } = useDocumentEvents();
    const [formState] = useAllFormFields();
    const { id, collectionSlug, globalSlug } = useDocumentInfo();
    /**
   * For client-side apps, send data through `window.postMessage`
   * The preview could either be an iframe embedded on the page
   * Or it could be a separate popup window
   * We need to transmit data to both accordingly
   */ useEffect(()=>{
        if (!isLivePreviewing || !appIsReady) {
            return;
        }
        // For performance, do not reduce fields to values until after the iframe or popup has loaded
        if (formState) {
            const values = reduceFieldsToValues(formState, true);
            if (!values.id) {
                values.id = id;
            }
            const message = {
                type: 'payload-live-preview',
                collectionSlug,
                data: values,
                externallyUpdatedRelationship: mostRecentUpdate,
                globalSlug,
                locale: locale.code
            };
            // Post message to external popup window
            if (previewWindowType === 'popup' && popupRef.current) {
                popupRef.current.postMessage(message, url);
            }
            // Post message to embedded iframe
            if (previewWindowType === 'iframe' && iframeRef.current) {
                iframeRef.current.contentWindow?.postMessage(message, url);
            }
        }
    }, [
        formState,
        url,
        collectionSlug,
        globalSlug,
        id,
        previewWindowType,
        popupRef,
        appIsReady,
        iframeRef,
        mostRecentUpdate,
        locale,
        isLivePreviewing,
        loadedURL
    ]);
    /**
   * To support SSR, we transmit a `window.postMessage` event without a payload
   * This is because the event will ultimately trigger a server-side roundtrip
   * i.e., save, save draft, autosave, etc. will fire `router.refresh()`
   */ useEffect(()=>{
        if (!isLivePreviewing || !appIsReady) {
            return;
        }
        const message = {
            type: 'payload-document-event'
        };
        // Post message to external popup window
        if (previewWindowType === 'popup' && popupRef.current) {
            popupRef.current.postMessage(message, url);
        }
        // Post message to embedded iframe
        if (previewWindowType === 'iframe' && iframeRef.current) {
            iframeRef.current.contentWindow?.postMessage(message, url);
        }
    }, [
        mostRecentUpdate,
        iframeRef,
        popupRef,
        previewWindowType,
        url,
        isLivePreviewing,
        appIsReady
    ]);
    if (previewWindowType !== 'iframe') {
        return null;
    }
    return /*#__PURE__*/ _jsxDEV("div", {
        className: [
            baseClass,
            isLivePreviewing && `${baseClass}--is-live-previewing`,
            breakpoint && breakpoint !== 'responsive' && `${baseClass}--has-breakpoint`
        ].filter(Boolean).join(' '),
        children: /*#__PURE__*/ _jsxDEV("div", {
            className: `${baseClass}__wrapper`,
            children: [
                /*#__PURE__*/ _jsxDEV(LivePreviewToolbar, {
                    ...props
                }, void 0, false, {
                    fileName: "src/elements/LivePreview/Window/index.tsx",
                    lineNumber: 134,
                    columnNumber: 9
                }, this),
                /*#__PURE__*/ _jsxDEV("div", {
                    className: `${baseClass}__main`,
                    children: /*#__PURE__*/ _jsxDEV(DeviceContainer, {
                        children: url ? /*#__PURE__*/ _jsxDEV(IFrame, {}, void 0, false, {
                            fileName: "src/elements/LivePreview/Window/index.tsx",
                            lineNumber: 136,
                            columnNumber: 35
                        }, this) : /*#__PURE__*/ _jsxDEV(ShimmerEffect, {
                            height: "100%"
                        }, void 0, false, {
                            fileName: "src/elements/LivePreview/Window/index.tsx",
                            lineNumber: 136,
                            columnNumber: 48
                        }, this)
                    }, void 0, false, {
                        fileName: "src/elements/LivePreview/Window/index.tsx",
                        lineNumber: 136,
                        columnNumber: 11
                    }, this)
                }, void 0, false, {
                    fileName: "src/elements/LivePreview/Window/index.tsx",
                    lineNumber: 135,
                    columnNumber: 9
                }, this)
            ]
        }, void 0, true, {
            fileName: "src/elements/LivePreview/Window/index.tsx",
            lineNumber: 133,
            columnNumber: 7
        }, this)
    }, void 0, false, {
        fileName: "src/elements/LivePreview/Window/index.tsx",
        lineNumber: 124,
        columnNumber: 5
    }, this);
};

//# sourceMappingURL=index.js.map