import React, { useState, useEffect } from 'react';
import { RefreshControl, Platform } from 'react-native';

/**
 * 自定义下拉刷新组件
 * 修复了 Expo SDK 54 (React Native 0.76) 在 iOS 上 tintColor 首次渲染失效的问题
 */
const CustomRefreshControl = ({ tintColor, colors, ...props }) => {
  const [displayTintColor, setDisplayTintColor] = useState(Platform.OS === 'ios' ? undefined : tintColor);

  useEffect(() => {
    if (Platform.OS === 'ios') {
      // 延迟设置 tintColor 以绕过 SDK 54 / RN 0.76 的 bug
      const timer = setTimeout(() => {
        setDisplayTintColor(tintColor);
      }, 100);
      return () => clearTimeout(timer);
    } else {
      setDisplayTintColor(tintColor);
    }
  }, [tintColor]);

  return (
    <RefreshControl
      {...props}
      tintColor={displayTintColor}
      colors={colors || (tintColor ? [tintColor] : undefined)}
    />
  );
};

export default React.memo(CustomRefreshControl);
