import React from 'react';
import {
  Image,
  StyleSheet,
  Text,
  TouchableNativeFeedback,
  View,
} from 'react-native';
import { Images } from '../../assets';
import { UserBody } from '../../models';
import { DistanceIndicator } from '../common';
import { Card } from '../ui';

interface Props {
  employee: UserBody & { distance: number };
  onSelected: () => void;
}

export const EmployeeListItem: React.SFC<Props> = (
  { employee: { avatar, name, birthYear, distance, description }, onSelected }) => (
    <TouchableNativeFeedback onPress={onSelected}>
      <View>
        <Card style={{ padding: 0 }}>
          <View style={styles.container}>
            <Image source={avatar ? { uri: avatar } : Images.avatarPlaceholder} style={styles.image} />
            <View style={styles.data}>
              <Text style={styles.name}>
                {name}
              </Text>
              {!!birthYear &&
                <Text style={styles.small}>
                  Rocznik: {birthYear}
                </Text>
              }
              {distance >= 0 && <DistanceIndicator distance={distance} />}
              <Text style={[styles.small]} numberOfLines={1}>
                {description}
              </Text>
            </View>
          </View>
        </Card>
      </View>
    </TouchableNativeFeedback>
  );

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 6,
    flexDirection: 'row',
    justifyContent: 'space-between',
  },
  row: {
    flexDirection: 'row',
  },
  data: {
    marginLeft: 12,
    flex: 1,
  },
  small: {
    fontSize: 11,
  },
  age: {
    fontSize: 11,
  },
  name: {
    fontWeight: 'bold',
  },
  image: {
    width: 64,
    height: 64,
    borderRadius: 2,
  },
});
