import React, { RefObject, useEffect, useRef, useState } from 'react';
import throttle from 'lodash.throttle';

import { RelatedVideoData } from '../../typings/entities';

interface Props {
  shortCodeParams: any;
  postContext: any;
}

const RelatedVideoEmbed: React.FC<Props> = ({ shortCodeParams, postContext }) => {
  const iframeRef: RefObject<HTMLIFrameElement> = useRef();
  const [width, setWidth] = useState<number>(320);

  useEffect(() => {
    const onResize = throttle(() => {
      if (iframeRef.current) {
        setWidth(iframeRef.current.parentElement.offsetWidth);
      }
    }, 300);
    window.addEventListener('resize', onResize);
    onResize();
    return () => onResize.cancel();
  }, [iframeRef.current]);

  function getRelatedVideoEmbed(): RelatedVideoData {
    if (!shortCodeParams?.length || !postContext?.related_video?.length) {
      return null;
    }
    const relatedIndex = parseInt(shortCodeParams[0]);
    if (isNaN(relatedIndex)) {
      return null;
    }
    return postContext?.related_video[relatedIndex - 1];
  }

  const relatedVideoEmbed = getRelatedVideoEmbed();

  if (!relatedVideoEmbed) {
    return null;
  }

  return (
    <iframe
      ref={iframeRef}
      src={`https://www.youtube.com/embed/${relatedVideoEmbed.related_video_video_id}`}
      width={`${width}px`}
      height={`${width * .5625}px`}
      frameBorder="0"
    />
  );
};

export default RelatedVideoEmbed;