// /**
//  * Sample React Native App
//  * https://github.com/facebook/react-native
//  *
//  * @format
//  */
//
// import React from 'react';
// import Navigation from './src/navigation';
// import {ThemeProvider} from './src/contexts/ThemeContext';
//
// function App(): JSX.Element {
//   return (
//     <ThemeProvider>
//       <Navigation />
//     </ThemeProvider>
//   );
// }
//
// export default App;


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

import React, { useState, useEffect } 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';

function App(): JSX.Element {
  const [fontLoaded, setFontLoaded] = useState(false);
  const [fontError, setFontError] = useState<string | null>(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);
  }, []);

  // 显示加载状态或错误信息
  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 />
    </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;