import { useNavigation } from '@react-navigation/native';
import { StackNavigationProp } from '@react-navigation/stack';
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { responsiveFontSize, responsiveHeight } from 'react-native-responsive-dimensions';
import { CountryCodes, CountryCode, CountryName, StackParams } from '../../types';
import CountryItem from './CountryItem';

const Countries = () => {
  const navigation = useNavigation<StackNavigationProp<StackParams>>();
  const handleSelect = (country: CountryCodes) => navigation.navigate('Institutions', { country });

  return (
    <View style={styles.container}>
      <Text style={styles.title}>{'Select your country'}</Text>
      <View>
        {Object.keys(CountryCode).map(code => (
          <CountryItem
            key={code}
            code={code as CountryCodes}
            title={CountryName[code as CountryCodes]}
            onPress={handleSelect}
            disabled={code === CountryCode.CL || code === CountryCode.MX}
          />
        ))}
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'flex-start',
    alignSelf: 'center',
    width: '87%',
  },
  title: {
    alignSelf: 'flex-start',
    marginTop: responsiveHeight(3),
    marginBottom: responsiveHeight(8),
    fontSize: responsiveFontSize(2.8),
    fontFamily: 'Merriweather-Regular',
  },
});

export default Countries;