import React, { FC, useEffect, useRef } from 'react';
import createIframe from '../../utils/iframe/iframe';
import { MiniAppView } from '../../model/miniAppView';

// type Props = IframeHTMLAttributes<HTMLElement>;
interface Props {
  view: MiniAppView;
  sandboxAttributes?: Array<string>;
  className?: string;
}

const Frame: FC<Props> = (props: Props) => {
  const { className, view, sandboxAttributes } = props;
  const divRef = useRef<HTMLDivElement>(null);
  useEffect(() => {
    // const el = document.getElementById('iframe-holder');
    const iframe = createIframe({ el: divRef.current, sandboxAttributes });
    iframe.setProps({ view, className });
  }, [className, view, sandboxAttributes]);
  return <div ref={divRef} id="iframe-holder"></div>;
};

const defautlSandboxAttributes = [
  'allow-modals',
  'allow-forms',
  'allow-pointer-lock',
  'allow-popups',
  'allow-same-origin',
  'allow-scripts',
];

Frame.defaultProps = {
  sandboxAttributes: defautlSandboxAttributes,
};

export default Frame;