nomadmania-app/src/screens/InAppScreens/TravellersScreen/UNMasters/index.tsx

import React, { useEffect, useState } from 'react';
import { FlatList, Text, TouchableOpacity, View } from 'react-native';
import { Image } from 'expo-image';

import { Header, HorizontalTabView, Loading, PageWrapper } from '../../../../components';
import {
  getMastersByCountryOfOrigin,
  getMastersByType,
  getMastersByYearOfCompletion,
  getUNMastersTypes
} from '../../../../database/unMastersService';
import { API_HOST } from '../../../../constants';

import { UNMastersListStyles } from './styles';

import ArrowUpWideIcon from '../../../../../assets/icons/arrow-up-wide-short.svg';

import type { Master } from '../../../../database/unMastersService';
import { Colors } from '../../../../theme';
import { getFontSize } from '../../../../utils';

const UNMastersScreen = () => {
  const [index, setIndex] = useState(0);
  const [routes, setRoutes] = useState<{ key: string; title: string }[]>([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const types = getUNMastersTypes();

    const parseRoutes = types?.map((item) => ({
      key: item.type.toString(),
      title: item.name
    }));

    setRoutes([
      { key: '-1', title: 'Sorted by country of origin' },
      { key: '-2', title: 'Sorted by year of completion' },
      ...(parseRoutes || [])
    ]);
    setLoading(false);
  }, []);

  if (loading) return <Loading />;

  return (
    <PageWrapper>
      <Header label={'UN Masters'} />
      <HorizontalTabView
        index={index}
        setIndex={setIndex}
        routes={routes}
        renderScene={({ route }: { route: { key: string; title: string } }) => (
          <UNMastersList type={route.key} />
        )}
      />
    </PageWrapper>
  );
};

const UNMastersList = React.memo(({ type }: { type: string }) => {
  const [isLoading, setIsLoading] = useState(true);
  const [masters, setMasters] = useState<
    | Master[]
    | { country: string; count: number; masters: Master[] }[]
    | { year: string; count: number; masters: Master[] }[]
    | null
  >([]);

  useEffect(() => {
    const fetchType = async () => {
      if (type === '-2') {
        const data = getMastersByYearOfCompletion();
        setMasters(data);
      } else if (type === '-1') {
        const data = getMastersByCountryOfOrigin();
        setMasters(data);
      } else {
        const data = getMastersByType(Number(type) || 1);
        setMasters(data);
      }
    };

    fetchType();
    setIsLoading(false);
  }, [type]);

  if (isLoading) return <Loading />;

  const renderItem = ({ item }: { item: any }) => {
    const UserItem = ({ user }: { user: Master }) => {
      return (
        <View style={UNMastersListStyles.wrapper}>
          <View style={{ gap: 3, marginLeft: 5 }}>
            <Text style={UNMastersListStyles.firstAndLastName}>{user.full_name}</Text>
            <View style={UNMastersListStyles.wrapper}>
              <Text style={UNMastersListStyles.descriptionText}>
                Born: {user.born} / Age when done: {user.age} /
              </Text>
              <Image
                style={[UNMastersListStyles.countryFlag, { marginLeft: 5 }]}
                source={{ uri: API_HOST + '/img/flags_new/' + user.origin1_flag }}
              />
              {user.origin2_flag && user.origin2_flag !== user.origin1_flag ? (
                <Image
                  style={[UNMastersListStyles.countryFlag, { marginLeft: -5 }]}
                  source={{ uri: API_HOST + '/img/flags_new/' + user.origin2_flag }}
                />
              ) : null}
            </View>
            <View style={UNMastersListStyles.wrapper}>
              <Text style={UNMastersListStyles.descriptionText}>
                Year / final country: {user.final_year}
              </Text>
              <Image
                style={[UNMastersListStyles.countryFlag, { marginLeft: 5 }]}
                source={{ uri: API_HOST + '/img/flags_new/' + user.final_flag }}
              />
            </View>
          </View>
        </View>
      );
    };

    const CountryItem = ({
      country,
      masters,
      count,
      flag
    }: {
      country: string;
      masters: Master[];
      count: number;
      flag: string;
    }) => {
      if (masters.length === 0) return;

      return (
        <View style={UNMastersListStyles.countryAndYearItemWrapper}>
          <View style={UNMastersListStyles.countryAndYearHeader}>
            <Image source={{ uri: API_HOST + flag }} style={{ width: 24, height: 16 }} />
            <Text style={{ color: Colors.DARK_BLUE, fontSize: getFontSize(18), fontWeight: '700' }}>
              {country} ({count})
            </Text>
          </View>
          <FlatList
            contentContainerStyle={{ gap: 10 }}
            horizontal={false}
            showsVerticalScrollIndicator={false}
            data={masters}
            renderItem={({ item }) => <UserItem user={item} />}
          />
        </View>
      );
    };

    const YearItem = ({
      year,
      masters,
      count
    }: {
      year: string;
      masters: Master[];
      count: number;
    }) => {
      return (
        <View style={UNMastersListStyles.countryAndYearItemWrapper}>
          <View style={UNMastersListStyles.countryAndYearHeader}>
            <Text style={{ color: Colors.DARK_BLUE, fontSize: getFontSize(18), fontWeight: '700' }}>
              {year} ({count})
            </Text>
          </View>
          <FlatList
            contentContainerStyle={{ gap: 10 }}
            horizontal={false}
            showsVerticalScrollIndicator={false}
            data={masters}
            renderItem={({ item }) => <UserItem user={item} />}
          />
        </View>
      );
    };

    return type !== '-2' ? (
      type !== '-1' ? (
        <UserItem user={item as Master} />
      ) : (
        <CountryItem
          country={item.country}
          masters={item.masters}
          count={item.count}
          flag={item.flag}
        />
      )
    ) : (
      <YearItem year={item.year} masters={item.masters} count={item.count} />
    );
  };

  return (
    <FlatList
      contentContainerStyle={{ gap: 10 }}
      horizontal={false}
      data={masters}
      renderItem={renderItem}
      showsVerticalScrollIndicator={false}
    />
  );
});

export default UNMastersScreen;