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 { getMastersByType, 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';

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(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[] | null>([]);

  useEffect(() => {
    const fetchType = async () => {
      const data = getMastersByType(Number(type) || 1);
      setMasters(data);
    };

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

  if (isLoading) return <Loading />;

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

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

export default UNMastersScreen;