import React, {useMemo} from 'react';
import {View} from 'react-native';
import {
  CustomRendererProps,
  TBlock,
  useContentWidth,
} from 'react-native-render-html';
import YoutubePlayer from 'react-native-youtube-iframe';
import {
  HTMLIframe,
  HTMLIframeProps,
  useHtmlIframeProps,
} from '@native-html/iframe-plugin';
import {WebView} from '@components/_core/WebView';
import {isAndroid} from '@shared/utils';

import {ASPECT_RATIO_16_9} from '../../constants';
import {
  getCustomHtml,
  getResizedAndAlignStyle,
  getYoutubeVideoId,
  isYoutubeUrl,
  needCustomWebView,
} from '../../utils';
import {styles} from './styles';

function CustomIframeRenderer(props: CustomRendererProps<TBlock>) {
  const contentWidth = useContentWidth();
  const iframeProps = useHtmlIframeProps(props) as HTMLIframeProps & {
    contentWidth: number;
    resizeAndAlignMultimedia: boolean;
  };
  const source: string | undefined = iframeProps.htmlAttribs.src;
  const shouldResizeAndAlign = iframeProps.resizeAndAlignMultimedia;

  const {height, width} = iframeProps.htmlAttribs || {};

  const iframeStyle = useMemo(() => {
    if (shouldResizeAndAlign) {
      const style = getResizedAndAlignStyle(
        props.tnode,
        contentWidth,
        ASPECT_RATIO_16_9,
      );
      return {...style, minHeight: style.height};
    }
    return undefined;
  }, [contentWidth, shouldResizeAndAlign, props.tnode]);

  const isCanva = useMemo(
    () => !!source?.includes('canva.com/design'),
    [source],
  );

  if (source && isYoutubeUrl(source)) {
    const videoId = getYoutubeVideoId(source);
    if (videoId) {
      const videoHeight =
        height && width && height > width ? parseInt(height, 10) : 270;
      return (
        <View
          style={[
            styles.webview,
            iframeStyle
              ? {
                  width: contentWidth,
                  alignItems: iframeStyle.alignSelf,
                  minHeight: iframeStyle.height,
                }
              : {height: videoHeight},
          ]}>
          <YoutubePlayer
            height={iframeStyle?.height || videoHeight}
            width={iframeStyle?.width || contentWidth}
            videoId={videoId}
            play={false}
            initialPlayerParams={{
              preventFullScreen: false,
              controls: true,
            }}
          />
        </View>
      );
    }
  }

  if (source && needCustomWebView(source)) {
    const customHtml = getCustomHtml(iframeProps.htmlAttribs);

    return (
      <WebView
        source={{html: customHtml}}
        style={styles.webview}
        bounces={false}
        scrollEnabled={false}
      />
    );
  }

  return (
    <HTMLIframe
      {...iframeProps}
      scalesPageToFit={true}
      style={[
        iframeProps.style,
        styles.centerEmbeddedFrame,
        {
          width: contentWidth - 40,
          ...(height &&
            width &&
            height > width && {height: parseInt(height, 10)}),
        },
      ]}
      {...(isCanva && isAndroid
        ? {
            webViewProps: {
              ...iframeProps.webViewProps,
              nestedScrollEnabled: false,
            },
          }
        : {})}
    />
  );
}

export default CustomIframeRenderer;
