import React, { useEffect, useRef } from 'react';

const ZapThreadsWrapper = ({ anchor, relays, disable }) => {
  // Create a ref to store the reference to the <div> element
  const zapRef = useRef(null);

  useEffect(() => {
    // Create a new <script> element
    const script = document.createElement('script');
    // Set the source URL of the script to load the ZapThreads library
    script.src = 'https://unpkg.com/zapthreads/dist/zapthreads.iife.js';
    // Set the script to load asynchronously
    script.async = true;

    // Function to handle the script load event
    const handleScriptLoad = () => {
      // Create a new <zap-threads> element
      const zapElement = document.createElement('zap-threads');
      zapElement.setAttribute('anchor', anchor);
      zapElement.setAttribute('relays', relays);
      zapElement.setAttribute('disable', disable);

      // Remove any existing <zap-threads> element before appending a new one
      if (zapRef.current && zapRef.current.firstChild) {
        zapRef.current.removeChild(zapRef.current.firstChild);
      }

      // Append the new <zap-threads> element to the <div> referenced by zapRef
      if (zapRef.current) {
        zapRef.current.appendChild(zapElement);
      }
    };

    // Attach the handleScriptLoad function to the script's load event
    script.addEventListener('load', handleScriptLoad);

    // Append the <script> element to the <body> of the document
    document.body.appendChild(script);

    // Cleanup function to remove the <zap-threads> element and the <script> element when the component is unmounted
    return () => {
      // Remove the <zap-threads> element from the <div> referenced by zapRef
      if (zapRef.current && zapRef.current.firstChild) {
        zapRef.current.removeChild(zapRef.current.firstChild);
      }
      // Remove the <script> element from the <body> of the document
      document.body.removeChild(script);
      // Remove the load event listener from the script
      script.removeEventListener('load', handleScriptLoad);
    };
  }, [anchor, relays, disable]);

  // Render a <div> element and attach the zapRef to it
  return <div ref={zapRef} />;
};

export default ZapThreadsWrapper;