/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 */

import React, {useState, useEffect, useRef} from 'react';
import Navigation from './src/navigation';
import {ThemeProvider} from './src/contexts/ThemeContext';
import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
import {View, Text, ActivityIndicator, StyleSheet} from 'react-native';
import {BeautifulDialog, DialogUtils} from './src/utils/DialogUtils';

function App(): JSX.Element {
  const [fontLoaded, setFontLoaded] = useState(false);
  const [fontError, setFontError] = useState<string | null>(null);
  const dialogRef = useRef<any>(null);

  useEffect(() => {
    const loadFont = async () => {
      try {
        // 先检查字体是否已加载
        const isLoaded = await MaterialIcons.hasIcon('home');

        if (!isLoaded) {
          console.log('Material Icons not loaded. Loading now...');
          await MaterialIcons.loadFont();
        }

        // 确认字体是否加载成功
        const fontName = MaterialIcons.getFontFamily();
        console.log(`Font loaded successfully: ${fontName}`);
        setFontLoaded(true);
      } catch (error) {
        console.error('Font loading failed:', error);
        setFontError('Failed to load icon fonts');
      }
    };

    // 加入延迟以解决模拟器启动时的问题
    const timeout = setTimeout(() => {
      loadFont();
    }, 500);

    return () => clearTimeout(timeout);
  }, []);

  // 设置弹窗引用
  useEffect(() => {
    if (dialogRef.current) {
      DialogUtils.setDialogRef(dialogRef.current);
    }
  }, [fontLoaded]);

  // 显示加载状态或错误信息
  if (!fontLoaded || fontError) {
    return (
      <View style={styles.container}>
        <ActivityIndicator size="large" />
        <Text style={styles.statusText}>{fontError || 'Loading icons...'}</Text>
        <Text style={styles.debugText}>
          Using MaterialIcons font family: {MaterialIcons.getFontFamily()}
        </Text>
      </View>
    );
  }

  return (
    <ThemeProvider>
      <Navigation />
      <BeautifulDialog ref={dialogRef} />
    </ThemeProvider>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#f5f5f5',
  },
  statusText: {
    marginTop: 20,
    fontSize: 16,
    color: '#333',
  },
  debugText: {
    marginTop: 10,
    fontSize: 12,
    color: '#666',
    fontFamily: 'monospace',
  },
});

export default App;