import React from 'react'
import { Text, View, useWindowDimensions } from 'react-native'
import { TouchableOpacity } from 'react-native'
import { CountryCard } from '../types/CountryCard'
import { colors } from '../Colors'
import { TextStyles } from '../Styles'
import { CountriesCarousel } from './CountriesCarousel'
import { Strings } from '../i18n'
import { TimeInterval } from '../types/TimeInterval'

interface CountriesComponentProps {
  countries: CountryCard[]
  onSwipe: (country: CountryCard, rank: number) => void
  onPressCountry: (country: CountryCard) => void
  onPressViewAll: () => void
  timeInterval: TimeInterval
}

type Props = CountriesComponentProps

const BUTTON_HEIGHT = 50

export const CountriesComponent: React.FC<Props> = ({
  onPressCountry,
  onPressViewAll,
  onSwipe,
  countries,
  timeInterval,
}) => {
  const { width } = useWindowDimensions()
  return (
    <View
      style={{
        flex: 1,
        borderTopRightRadius: 20,
        borderTopLeftRadius: 20,
        marginTop: -20,
        overflow: 'hidden',
        backgroundColor: colors.darkGray,
      }}
    >
      <TouchableOpacity
        onPress={onPressViewAll}
        style={{
          alignItems: 'flex-end',
          justifyContent: 'center',
          height: BUTTON_HEIGHT,
          paddingHorizontal: 16,
        }}
      >
        <Text
          style={[
            TextStyles.micro,
            {
              textTransform: 'uppercase',
              paddingRight: 8,
              paddingTop: 8,
            },
          ]}
        >
          {Strings.Shared.ViewAll}
        </Text>
      </TouchableOpacity>
      {countries.length > 0 ? (
        <CountriesCarousel
          countries={countries}
          onSwipe={onSwipe}
          onPressCountry={onPressCountry}
          width={width}
          timeInterval={timeInterval}
        />
      ) : null}
    </View>
  )
}