import React from 'react';
import { FlatList, StyleSheet, View, Text } from 'react-native';
import { useFonts } from 'expo-font';
import { Colors } from '@proximus/react-native-common-ui/lib/styling';
import { Icon, IconMap } from '@proximus/react-native-font-icons';

export default function App() {
  const [loaded] = useFonts({
    PxIcon: require('@proximus/react-native-font-icons/lib/assets/fonts/PxIcon.ttf'),
  });

  if (!loaded) {
    return (
      <View>
        <Text>Loading Font</Text>
      </View>
    );
  }

  return (
    <View style={styles.container}>
      <FlatList
        data={Object.keys(IconMap).sort((a, b) => a.localeCompare(b))}
        renderItem={({ item }) => (
          <View
            style={{
              width: '33%',
              marginVertical: 10,
              alignItems: 'center',
            }}
          >
            <Icon
              // @ts-ignore
              name={IconMap[item]}
              style={{
                color: Colors.shadesOfGrey.black,
                marginBottom: 5,
              }}
              size={36}
            />
            <Text>IconMap.</Text>
            <Text>{item}</Text>
          </View>
        )}
        numColumns={3}
        keyExtractor={(item) => item}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    justifyContent: 'center',
    padding: 20,
  },
});