import { CacheProvider } from '@emotion/react';
import createCache from '@emotion/cache';
import { useFrame } from 'react-frame-component';
import { useEffect, useMemo } from 'react';
import { useBuilder } from '@tempi/core-editor';
import { ConfigProvider } from 'antd';

export const IFrameProvider = ({ children }) => {
  const { document: frameDocument } = useFrame();
  const { setFrame } = useBuilder();

  const cache = useMemo(() => {
    return createCache({
      key: 'pb-iframe',
      container: frameDocument?.head,
    });
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  useEffect(() => {
    setFrame?.(frameDocument);
  }, [frameDocument, setFrame]);
  return (
    <CacheProvider value={cache}>
      <ConfigProvider
        getPopupContainer={() => frameDocument?.body || document?.body}
      >
        {children}
      </ConfigProvider>
    </CacheProvider>
  );
};