import React, { useCallback, useContext, useEffect, useRef } from "react";
import { findNodeHandle } from "react-native";
import { INativeAdContext, NativeAdContext } from "./context";
import { Text } from "@momo-kits/foundation";
import {TextProps} from "@momo-kits/foundation"

interface HeadlineViewProps extends TextProps {
}

const HeadlineView = ({...props}: HeadlineViewProps) => {
  const { nativeAd, nativeAdView } = useContext<INativeAdContext>(NativeAdContext);
  const headlineRef = useRef<any>(null);
  const _onLayout = useCallback(() => {
    if (!nativeAdView) return;

    let handle = findNodeHandle(headlineRef.current);
    nativeAdView.setNativeProps({
      headline: handle,
    });
  }, [nativeAdView, headlineRef]);

  useEffect(() => {
    _onLayout();
  }, [nativeAd, nativeAdView]);

  return (
    <Text {...props} ref={headlineRef} onLayout={_onLayout}>
      {nativeAd ? nativeAd.headline : null}
    </Text>
  );
};

export default HeadlineView;