import { View, Text, StyleSheet, Image } from 'react-native'
import React from 'react'
import { isAndroid, moderateScale } from '../../../common/constants'
import globalstyles from '../../../common/globalstyles';
import images from '../../../assets/images/map';
import * as colors from '../../../common/colors';
import moment from 'moment';
import appStyles from '../../../appStyles';
let light = false;
const dateElement = (startDate, endDate) => {
const startDateArr = startDate?.split('-');
const startYear = startDateArr[0];
const startMonthName = new Date(startDate)?.toLocaleString('en-us', { month: 'short' });
const startDay = startDateArr[2];
const endDateArr = endDate?.split('-');
const endYear = endDateArr[0];
const endMonthName = new Date(endDate)?.toLocaleString('en-us', { month: 'short' });
const endDay = endDateArr[2];
if (startYear !== endYear) {
return (<>
<Text lineHeight={1} style={[styles.dateStyle, styles.dateNormal, { marginRight: 2 }, light && { color: 'white' }]} >{startYear}</Text>
<Text lineHeight={1} style={[styles.dateStyle, styles.dateNormal, { marginRight: 2 }, light && { color: 'white' }]} textTransform='uppercase'>{startMonthName}</Text>
<Text lineHeight={1} style={[styles.dateStyle, styles.dateBold, { marginRight: 2 }, light && { color: 'white' }]} >{startDay}</Text>
<Text lineHeight={1} style={[styles.dateStyle, styles.dateBold, { marginRight: 2 }, light && { color: 'white' }]} >-</Text>
<Text lineHeight={1} style={[styles.dateStyle, styles.dateNormal, { marginRight: 2 }, light && { color: 'white' }]} >{endYear}</Text>
<Text lineHeight={1} style={[styles.dateStyle, styles.dateNormal, { marginRight: 2 }, light && { color: 'white' }]} textTransform='uppercase'>{endMonthName}</Text>
<Text lineHeight={1} style={[styles.dateStyle, styles.dateBold, { marginRight: 2 }, light && { color: 'white' }]} >{endDay}</Text>
</>
)
}
if (startYear === endYear) {
if (startMonthName === endMonthName) {
if (startDay === endDay) {
return (<>
<Text lineHeight={1} style={[styles.dateStyle, styles.dateNormal, { marginRight: 2 }, light && { color: 'white' }]}>{startYear}</Text>
<Text lineHeight={1} style={[styles.dateStyle, styles.dateNormal, { marginRight: 2 }, light && { color: 'white' }]} textTransform='uppercase'>{startMonthName}</Text>
<Text lineHeight={1} style={[styles.dateStyle, styles.dateBold, { marginRight: 2 }, light && { color: 'white' }]} >{startDay}</Text>
</>
)
} else {
return (<>
<Text lineHeight={1} style={[styles.dateStyle, styles.dateNormal, { marginRight: 2 }, light && { color: 'white' }]}>{startYear}</Text>
<Text lineHeight={1} style={[styles.dateStyle, styles.dateNormal, { marginRight: 2 }, light && { color: 'white' }]} textTransform='uppercase'>{startMonthName}</Text>
<Text lineHeight={1} style={[styles.dateStyle, styles.dateBold, { marginRight: 2 }, light && { color: 'white' }]}>{startDay} - {endDay}</Text>
</>
)
}
} else {
return (<>
<Text lineHeight={1} style={[styles.dateStyle, styles.dateNormal, { marginRight: 2 }, light && { color: 'white' }]}>{startYear}</Text>
<Text lineHeight={1} style={[styles.dateStyle, styles.dateNormal, { marginRight: 2 }, light && { color: 'white' }]} textTransform='uppercase'>{startMonthName}</Text>
<Text lineHeight={1} style={[styles.dateStyle, styles.dateBold, { marginRight: 2 }, light && { color: 'white' }]}>{startDay}</Text>
<Text lineHeight={1} style={[styles.dateStyle, styles.dateNormal, { marginRight: 2 }, light && { color: 'white' }]}>-</Text>
<Text lineHeight={1} style={[styles.dateStyle, styles.dateNormal, { marginRight: 2 }, light && { color: 'white' }]} textTransform='uppercase'>{endMonthName}</Text>
<Text lineHeight={1} style={[styles.dateStyle, styles.dateBold, { marginRight: 2 }, light && { color: 'white' }]}>{endDay}</Text>
</>
)
}
} else return null
}
const locationElement = (city, nation_code, pool_name, isPressable) => {
return (
<View style={{ flexDirection: 'row', alignItems: 'center', width: isPressable ? '55%' : '100%' }}>
{nation_code && nation_code != null &&
<Image
resizeMode="contain"
source={{
uri: `https://cdn-eu.livetiming.se/country_flags/s/${nation_code}.png`,
}}
style={[
{
height: moderateScale(12),
width: moderateScale(18),
left: moderateScale(0),
borderRadius: isAndroid ? moderateScale(1) : moderateScale(4),
marginRight: moderateScale(2),
},
]}
/>
}
{<View style={{ flexDirection: 'row', alignItems: 'flex-start', flex: 1 }}>
{pool_name != '' && <Text numberOfLines={1} style={[styles.dateStyle, light && { color: 'white' }]}>{pool_name}</Text>}
{pool_name != '' && city !== null && <Text numberOfLines={1} style={[styles.dateStyle, light && { color: 'white' }]}>{', '}</Text>}
{city !== null && <Text numberOfLines={1} style={[styles.dateStyle, light && { color: 'white' }]}>{city}</Text>}
</View>}
</View>
)
}
export default function CompetitionInfo({ name, nation_code, city, pool_name, startDate, endDate, small_image, lightMode = false, isLive = false, isPressable = false }) {
light = lightMode;
//startDate = moment(startDate, 'YYYY-MM-DD').format('DD MMM, YYYY');
// endDate = moment(endDate, 'YYYY-MM-DD').format('DD MMM, YYYY');
return (
<>
<View style={[styles.textContainer]}>
{name &&
<Text
numberOfLines={1}
style={[
globalstyles.tvHeader2LabelStyle,
styles.tvHeaderMarginStyle,
lightMode && { color: 'white' },
{ width: isLive ? '75%' : '95%' },
]}>{name}
</Text>}
<View style={{display: "flex", flexDirection: "row"}}>
<View style={[styles.imageContainer, appStyles.dropShadow]} elevation={5}>
<Image
resizeMode="cover"
source={small_image ? { uri: small_image } : images.placeholder_icon}
style={[
{
height: moderateScale(45),
width: moderateScale(90),
alignSelf: 'center',
},
]}
/>
</View>
<View style={[
styles.subRowContainer,
{ flexDirection: 'column', alignItems: 'flex-start' }
]}>
{<View style={[{ flexDirection: 'row', alignItems: 'flex-start', justifyContent: 'space-evenly', maxWidth: '100%' },]}>
{dateElement(startDate, endDate)}
</View>}
{<View style={{
width: '100%'
}}>
{locationElement(city, nation_code, pool_name, isPressable)}
</View>}
</View>
</View>
</View>
</>
)
}
const styles = StyleSheet.create({
tvHeaderMarginStyle: {
marginBottom: moderateScale(2)
},
textContainer: {
// width: '100%'
// maxWidth: '60%',
flex: 1
},
subRowContainer: {
flexDirection: 'row',
alignItems: 'center',
},
dateStyle: {
fontFamily: "Roboto",
fontSize: moderateScale(13),
color: colors.darkBlueLight2,
},
dateBold: {
fontWeight: '500'
},
dateNormal: {
fontWeight: '300'
},
imageContainer: {
alignItems: 'center',
justifyContent: 'center',
backgroundColor: colors.white,
top: moderateScale(1),
height: moderateScale(45),
width: moderateScale(90),
alignSelf: 'center',
marginLeft: moderateScale(-2),
right: moderateScale(5),
borderRadius: moderateScale(5),
overflow: 'hidden',
}
});