Undefined

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

const ResizableIframe: React.FC = (props) => {
  const window_name = props.name;
  const window_color = props.color;
  const window_url = props.url || "https://gummysearch.com/?utm_source=iframetester.com";

  const resizableRefs = useRef<Array<HTMLDivElement | null>>([]);
  const iframeRefs = useRef<Array<HTMLIFrameElement | null>>([]);

  const handleResizeStart = (event: any) => {
    const target = event.target;
    target.setAttribute('data-x', target.offsetLeft);
    target.setAttribute('data-y', target.offsetTop);

    const index = resizableRefs.current.indexOf(target);
    iframeRefs.current[index]?.style.setProperty('pointer-events', 'none');
  };

  const handleResizeMove = (event: any) => {
    const target = event.target;
    const x = parseFloat(target.getAttribute('data-x')) || 0;
    const y = parseFloat(target.getAttribute('data-y')) || 0;

    const index = resizableRefs.current.indexOf(target);
    if (resizableRefs.current[index]) {
      resizableRefs.current[index].style.width = event.rect.width + 'px';
      resizableRefs.current[index].style.height = event.rect.height + 'px';

      const newX = x + event.deltaRect.left;
      const newY = y + event.deltaRect.top;

      resizableRefs.current[index].style.transform = `translate(${newX}px, ${newY}px)`;

      target.setAttribute('data-x', newX.toString());
      target.setAttribute('data-y', newY.toString());
    }
  };

  const handleResizeEnd = () => {
    iframeRefs.current.forEach((iframe) => {
      if (iframe) {
        iframe.style.setProperty('pointer-events', 'auto');
      }
    });
  };

  useEffect(() => {
    resizableRefs.current.forEach((resizableRef, index) => {
      if (resizableRef) {
        interact(resizableRef)
          .resizable({
            edges: { bottom: true, right: true },
            restrictEdges: {
              outer: 'parent',
              endOnly: true,
            },
            restrictSize: {
              min: { width: 50, height: 50 },
            },
            inertia: true,
          })
          .on('resizestart', handleResizeStart)
          .on('resizemove', handleResizeMove)
          .on('resizeend', handleResizeEnd);
      }

      const draggableRef = resizableRef?.querySelector('.draggable-window');
      const iframeRef = resizableRef?.querySelector('embed');

      if (draggableRef && iframeRef) {
        interact(draggableRef)
          .draggable({
            inertia: true,
            modifiers: [
              interact.modifiers.restrictRect({
                restriction: 'parent',
                endOnly: true,
              }),
            ],
            autoScroll: true,
            listeners: {
              move: (event) => dragMoveListener(event, index),
            },
          })
          .on('dragstart', () => handleDragMoveStart(index))
          .on('dragend', handleDragMoveEnd);
      }
    });
  }, []);

  const handleDragMoveStart = (index: number) => {
    iframeRefs.current[index]?.style.setProperty('pointer-events', 'none');
  };

  const handleDragMoveEnd = () => {
    iframeRefs.current.forEach((iframe) => {
      if (iframe) {
        iframe.style.setProperty('pointer-events', 'auto');
      }
    });
  };

  const dragMoveListener = (event: any, index: number) => {
    const target = resizableRefs.current[index];
    const x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx;
    const y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;

    target.style.transform = 'translate(' + x + 'px, ' + y + 'px)';

    target.setAttribute('data-x', x.toString());
    target.setAttribute('data-y', y.toString());
  };

  const window_exit = (event: any) => {
    event.target.parentElement.parentElement.parentElement.parentElement.remove();
  };
  const window_maximize = (event: any) => {
    event.target.parentElement.parentElement.parentElement.parentElement.classList.toggle("maximized");
  }
  const window_handleMoveStart = (event: any) => {
    console.log("Start Move");
    var container = document.getElementsByClassName('window');
    for(var i = 0; i < container.length; i++) {
      container[i].classList.remove("moved");
    }
    event.target.parentElement.parentElement.classList.add("moved");
  }
  const window_handleMoveStop = (event: any) => {
    console.log("Stop Move");
    // event.target.parentElement.parentElement.classList.remove("moved");
  }
  const soon = (event: any) => {
    console.log("Function not implemented :(");
  }


  return (
    <>
      <div className="window" ref={(el) => (resizableRefs.current[0] = el)} style={{ transform: 'translate(0px, 0px)' }} onMouseDown={window_handleMoveStart} onMouseUp={window_handleMoveStop}>
        <div className="border-window" style={{ borderColor: window_color }}>
          <div className="draggable-window" style={{ backgroundColor: window_color }}>
            {window_name}
            <div className="actions">
              <div id='a1' onClick={soon}>⎯</div>
              <div id='a2' onClick={window_maximize}>❐</div>
              <div id='a3' onClick={window_exit}>⤬</div>
            </div>
          </div>
          <embed src={window_url} ref={(el) => (iframeRefs.current[0] = el)}></embed>
        </div>
      </div>

    </>
  );
};

export default ResizableIframe;