import { FontAwesome, FontAwesome5 } from '@expo/vector-icons';
import { useNavigation } from '@react-navigation/native';
import React from 'react';
import { ScrollView, View } from 'react-native';

import MenuList from '../../components/List/MenuList';
import Loader from '../../components/Loader/Loader';
import { NavProps } from '../../components/Routes/Routes';
import { useLoggedUserSplashScreen } from '../../hooks/useSplashScreen';
import RecentMessages from './components/RecentMessages/RecentMessages';

const Profile = () => {
  const navigation = useNavigation<NavProps>();
  const isAppLoading = useLoggedUserSplashScreen();

  return (
    <View className="m-4 flex-1 justify-start bg-primary-bg">
      {!isAppLoading ? (
        <ScrollView>
          <MenuList
            classNames="mb-4"
            items={[
              {
                title: 'Moje kurzy',
                icon: <FontAwesome5 name="book-open" size={24} />,
                onPress: () => navigation.navigate('Education'),
              },
            ]}
          />

          <MenuList
            classNames="mb-4"
            items={[
              {
                title: 'Sněmy',
                icon: <FontAwesome name="calendar" size={24} />,
                onPress: () => navigation.navigate('Congress'),
              },
            ]}
          />
          <RecentMessages />
        </ScrollView>
      ) : (
        <Loader />
      )}
    </View>
  );
};

export default Profile;
