import React, {memo, useCallback} from 'react';
import {GestureResponderEvent} from 'react-native';
import {
  InternalRendererProps,
  TBlock,
  useInternalRenderer,
} from 'react-native-render-html';
import {getFullLink, getWebEnv, openUrlFromApp} from '@shared/utils';

function CustomLinkRenderer(props: InternalRendererProps<TBlock>) {
  const {Renderer, rendererProps} = useInternalRenderer('a', props);

  const onPress = useCallback(
    (event: GestureResponderEvent) => {
      const link = rendererProps.tnode.attributes.href;
      openUrlFromApp(getFullLink(link));
      !getWebEnv(link) && rendererProps.onPress?.(event);
    },
    [rendererProps],
  );

  return <Renderer {...rendererProps} onPress={onPress} />;
}

export default memo(CustomLinkRenderer);
