import React, { memo, useEffect, useRef, useState } from 'react';
import { sendPostMessage, classNames } from '../../utils/functions';
import { useStateValue } from '../../store/store';
import { prependHTTPS } from '../../utils/prepend-https';
import { stripSlashes } from '../../utils/strip-slashes';
import { addTrailingSlash } from '../../utils/add-trailing-slash';
import SiteSkeleton from './site-skeleton';
const SitePreview = () => {
const [ { templateResponse, showSidebar, siteLogo }, dispatch ] =
useStateValue();
const [ previewUrl, setPreviewUrl ] = useState( '' );
const [ loading, setLoading ] = useState( true );
const previewContainer = useRef( null );
useEffect( () => {
const url = templateResponse
? templateResponse?.[ 'astra-site-url' ]
: '';
if ( url !== '' ) {
setPreviewUrl(
addTrailingSlash( prependHTTPS( stripSlashes( url ) ) )
);
}
}, [ templateResponse ] );
useEffect( () => {
if ( loading !== false ) {
return;
}
sendPostMessage( {
param: 'cleanStorage',
data: siteLogo,
} );
}, [ loading ] );
const updateScaling = () => {
const container = previewContainer.current;
if ( ! container ) {
return;
}
const iframe =
container.querySelector( 'iframe' ) ?? container.children[ 1 ];
const containerWidth = document.body.clientWidth;
const containerHeight = document.body.clientHeight - 44;
const iframeWidth = iframe.clientWidth;
const iframeHeight = iframe.clientHeight;
const scaleX = containerWidth / iframeWidth;
const scaleY = containerHeight / iframeHeight;
const scaleValue = Math.min( scaleX, scaleY );
// Set the scale for both width and height
iframe.style.transform = `scale(${ scaleValue })`;
iframe.style.transformOrigin = 'top left';
iframe.style.height = `${ containerHeight / scaleValue }px`;
};
const handleIframeLoading = () => {
updateScaling();
setLoading( false );
};
useEffect( () => {
const intervalId = setInterval( updateScaling, 125 );
setTimeout( () => {
clearInterval( intervalId );
}, 500 );
return () => {
clearInterval( intervalId );
};
}, [ showSidebar ] );
const handleResize = () => {
// Collapse the sidebar when it's a mobile view.
if ( showSidebar ) {
if ( window.innerWidth < 1024 ) {
dispatch( {
type: 'set',
showSidebar: false,
} );
} else {
dispatch( {
type: 'set',
showSidebar: true,
} );
}
}
updateScaling();
};
// Update scaling on window resize.
useEffect( () => {
handleResize();
window.addEventListener( 'resize', handleResize );
return () => {
window.removeEventListener( 'resize', handleResize );
};
}, [] );
const renderBrowserFrame = () => (
<div
className={ classNames(
'flex items-center justify-start py-3 px-4 bg-browser-bar shadow-sm rounded-t-lg mx-auto h-[44px] z-[1] relative',
'w-full mx-0'
) }
>
<div className="flex gap-2 py-[3px] w-20">
<div className="w-[14px] h-[14px] border border-solid border-border-primary rounded-full" />
<div className="w-[14px] h-[14px] border border-solid border-border-primary rounded-full" />
<div className="w-[14px] h-[14px] border border-solid border-border-primary rounded-full" />
</div>
</div>
);
return (
<>
{ loading ? <SiteSkeleton /> : null }
{ previewUrl !== '' && (
<div className="w-full h-full p-4">
<div
ref={ previewContainer }
className="h-full relative overflow-hidden shadow-template-preview w-full mx-auto"
>
{ renderBrowserFrame() }
<div className="w-full h-full">
<iframe
id="astra-starter-templates-preview"
className="w-full h-full"
title="Website Preview"
height="100%"
width="100%"
src={ previewUrl }
onLoad={ handleIframeLoading }
/>
</div>
</div>
</div>
) }
</>
);
};
export default memo( SitePreview );