import { useRef } from 'react';

export function UdelFrame({ onEvaluate, hash, instance }) {

  const ref = useRef();

  window.addEventListener('message', (message) => {

    const childWindow = ref?.current?.contentWindow;

    if (message == null || message.source !== childWindow) {

      return; // Skip message in this event listener

    }

    onEvaluate(message.data);

  });

  const url = new URL(window.location.origin);

  url.hash = hash;

  url.searchParams.append('instance', instance);

  const source = url.toString();

  return (

    <iframe

      ref={ref}

      style={{

        display: 'flex',

        flexGrow: 1,

        minWidth: '50%',

        boxSizing: 'border-box',

        border: '0px',

      }}

      title="strudel embed"

      src={source}

    ></iframe>

  );

}