UserCell.js

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} />);