import React from 'react';
import { View, Text, TouchableWithoutFeedback, StyleSheet, Image } from 'react-native';
import {
  responsiveFontSize,
  responsiveHeight,
  responsiveWidth,
} from 'react-native-responsive-dimensions';
import { colors } from '../../theme/colors';
import { CountryCode, CountryCodes } from '../../types';

interface CountryItemProps {
  title: string;
  code: CountryCodes;
  onPress: (country: CountryCodes) => void;
  disabled: Boolean;
}

const getSource = (code: CountryCodes) => {
  switch (code) {
    case CountryCode.AR:
      return require('./argentina.png');
    case CountryCode.BR:
      return require('./brazil.png');
    case CountryCode.CL:
      return require('./colombia.png');
    case CountryCode.MX:
      return require('./mexico.png');
    default:
      return null;
  }
};

const CountryItem = (props: CountryItemProps): JSX.Element => {
  const { title, code, onPress, disabled } = props;
  const disabledStyles = disabled ? styles.disabledContainer : {};
  const handlePress = () => (disabled ? undefined : onPress(code));
  return (
    <TouchableWithoutFeedback onPress={handlePress}>
      <View style={StyleSheet.flatten([styles.container, disabledStyles])}>
        <View style={styles.imageContainer}>
          <Image
            resizeMethod="scale"
            resizeMode="stretch"
            source={getSource(code)}
            style={styles.image}
          />
        </View>
        <Text style={styles.text}>{title}</Text>
      </View>
    </TouchableWithoutFeedback>
  );
};

const styles = StyleSheet.create({
  container: {
    elevation: 6,
    flexDirection: 'row',
    alignItems: 'center',
    padding: responsiveFontSize(2.5),
    marginVertical: responsiveHeight(1.5),
    borderRadius: 4,
    backgroundColor: colors.white,
    width: responsiveWidth(87),
  },

  disabledContainer: {
    backgroundColor: colors.greyLighter,
  },

  text: {
    fontSize: responsiveFontSize(2.5),
    color: colors.greyDark,
    textTransform: 'capitalize',
    fontFamily: 'Lato-Regular',
  },

  disabledText: {
    color: '#dedede',
  },

  imageContainer: {
    height: responsiveHeight(3),
    marginRight: responsiveWidth(10),
  },
  image: {
    width: '100%',
    height: '100%',
    aspectRatio: 21 / 15,
  },
});

export default CountryItem;