import React, { useState, useMemo, ReactNode } from 'react';
import { Text, View } from 'react-native';

export function useMeasureTextSize(children: ReactNode, textStyle = {}) {
  const [size, setSize] = useState<null | {
    width: number;
    height: number;
  }>(null);

  const HiddenText = useMemo(
    () => (
      <View
        style={{
          position: 'absolute',
          opacity: 0,
          zIndex: -1,
        }}
        pointerEvents="none"
      >
        <Text
          style={{
            ...textStyle,
          }}
          onTextLayout={(e) => {
            const lines = e.nativeEvent.lines;

            if (!lines?.length) return;

            const width = Math.ceil(
              lines.reduce((max, line) => Math.max(max, line.width), 0)
            );

            const height = Math.ceil(
              lines.reduce((sum, line) => sum + line.height, 0)
            );

            setSize({ width, height });
          }}
        >
          {children}
        </Text>
      </View>
    ),
    [children, size]
  );

  return {
    ...size, // width, height
    HiddenText, // 渲染到屏幕外，不占布局
  };
}