import React from 'react';
import Frame from 'react-frame-component';
import { IFrameProvider } from './IFrameProvider';
import { landingLinks, reset, TEMPI_MAIN_IFRAME } from '@tempi/core-renderer';

interface IFrameProps {
  children: React.ReactNode;
}

export const IFrame = ({ children }: IFrameProps) => {
  if (typeof window === 'undefined') return null;
  return (
    <Frame
      id={TEMPI_MAIN_IFRAME}
      initialContent={`<!DOCTYPE html><html><head>
      <style>
      ${reset}
      </style>
      </head><body><div class="frame-root"></div><div id="modal-root"></div></body></html>`}
      style={{
        overflow: 'hidden',
        position: 'absolute',
        top: 0,
        bottom: 0,
        left: '50%',
        width: 420,
        minHeight: '100%',
        transform: 'translateX(-50%)',
        border: 'none',
        boxShadow: '0px 0px 15px 0px #80808020',
      }}
      head={landingLinks.map((link, index) => (
        <link {...link} key={index} />
      ))}
    >
      <IFrameProvider>{children}</IFrameProvider>
    </Frame>
  );
};

export const MemoizedIFrame = React.memo(IFrame);