import React from 'react';
import {
StyleSheet, View, Text,
} from 'react-native';
import {
Avatar, Image, Icon, Button,
} from 'react-native-elements';
import I18n from '../I18n/I18n';
const translations = {
searchResults: I18n.t('searchResults'),
years: I18n.t('years'),
follower: I18n.t('follower'),
};
const styles = StyleSheet.create({
container: {
flexDirection: 'row',
padding: 8,
color: '#C8C6CD',
borderWidth: 0.3,
},
boxAvatar: {
alignItems: 'center',
},
time: {
color: '#057AFF',
fontSize: 10,
},
boxTime: {
flexDirection: 'row',
paddingTop: 5,
alignItems: 'center',
},
boxName: {
flexDirection: 'row',
alignItems: 'center',
paddingLeft: 25,
flexShrink: 0,
flexBasis: 1,
},
name: {
paddingLeft: 5,
flex: 1,
},
text: {
alignItems: 'flex-end',
color: '#057AFF',
paddingLeft: 5,
},
boxUser: {
flexDirection: 'column',
flexWrap: 'wrap',
flex: 2,
justifyContent: 'center',
},
age: {
color: '#057AFF',
paddingLeft: 25,
},
btn: {
alignItems: 'flex-end',
paddingRight: 10,
justifyContent: 'center',
},
});
const BasicButton = (
<Button
title={translations.follower}
type="outline"
titleStyle={{ fontSize: 10 }}
/>
);
const LockIcon = (
<Button
title="bloquer"
type="outline"
titleStyle={{ fontSize: 10 }}
/>
);
const Users = (
<Icon
size={40}
name="add"
color="#517fa4"
/>
);
const Message = (
<Icon
size={40}
name="forum"
color="#517fa4"
/>
);
const buttonTypes = {
lock: LockIcon,
male: Users,
textsms: Message,
button: BasicButton,
};
const ButtonSelector = ({ buttonType }) => {
if (buttonType == null || buttonType === '') return null;
return buttonTypes[buttonType];
};
const AvatarTime = ({ avatar, conditionTime, userTimezone }) => (
<View style={styles.boxAvatar}>
<Avatar
rounded
size="medium"
source={{
uri: avatar,
}}
/>
{conditionTime ? (
<View style={styles.boxTime}>
<Icon
size={20}
name="home"
color="#057AFF"
/>
<Text style={styles.time}>{userTimezone}</Text>
</View>
) : null
}
</View>
);
const NameFlag = ({ flag, firstname, lastname }) => (
<View style={styles.boxName}>
<Image
style={{ width: 25, height: 10 }}
source={{ uri: flag }}
/>
<Text numberOfLines={1} ellipsizeMode="tail" style={styles.name}>
{firstname}
{' '}
{lastname}
</Text>
</View>
);
const Country = ({ city, state }) => (
<View style={{ flexDirection: 'row' }}>
<Icon
size={20}
name="place"
color="#e1e0dd"
/>
<View style={{ flexDirection: 'row' }}>
<Text style={styles.text}>
{city}
,
</Text>
<Text style={styles.text}>{state}</Text>
</View>
</View>
);
const UserCellWithoutButton = ({
user,
conditionTime,
}) => {
const {
picture, location, name, comments, userTimezone,
} = user;
const { age } = name;
return (
<View style={styles.container}>
<AvatarTime
avatar={picture.medium}
conditionTime={conditionTime}
userTimezone={userTimezone}
/>
<View style={styles.boxUser}>
<NameFlag flag={location.flags} firstname={name.first} lastname={name.last} />
<Text style={styles.age}>
<Text style={{ paddingLeft: 20 }}>{comments}</Text>
{age}
{' '}
{age ? `${translations.years}` : null}
</Text>
{age ? <Country city={location.city} state={location.country} /> : null}
</View>
</View>
);
};
const UserCellWithButton = ({
user,
buttonType,
}) => {
const {
picture, location, name, userTimezone,
} = user;
return (
<View style={styles.container}>
<AvatarTime
avatar={picture.medium}
conditionTime={false}
userTimezone={userTimezone}
/>
<View style={styles.boxUser}>
<NameFlag flag={location.flags} firstname={name.first} lastname={name.last} />
</View>
<View style={styles.btn}>
<ButtonSelector buttonType={buttonType} />
</View>
</View>
);
};
export default ({
user,
buttonType,
conditionTime,
onpress,
}) => (buttonType
? <UserCellWithButton user={user} buttonType={buttonType} onpress={onpress} />
: <UserCellWithoutButton user={user} conditionTime={conditionTime} />);