import React from 'react';
import {
  Linking,
  ScrollView,
  StyleSheet,
  View,
} from 'react-native';
import { UserBody } from '../../models';
import { DataElement, PhotoArea } from '../common';
import { Card } from '../ui';

interface Props {
  user: UserBody;
  footer?: JSX.Element;
}

export const EmployeeDetails: React.SFC<Props> = ({ user, footer }) => (
  <View style={{ flex: 1 }}>
    <ScrollView>
      <PhotoArea photoUrl={user.avatar} />
      <View style={styles.container}>
        <Card title='Podstawowe informacje'>
          <View>
            <DataElement label='Imię i nazwisko' data={user.name} />
            {user.email && (
              <DataElement
                label='Email'
                data={user.email}
                onPress={() => Linking.openURL(`mailto:${user.email}`)}
              />
            )}
            <DataElement label='O mnie' data={user.description} />
            <DataElement label='Rocznik' data={user.birthYear && user.birthYear.toString() || ''} />
          </View>
        </Card>
      </View>
    </ScrollView>
    {footer}
  </View>
);

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'flex-start',
  },
  editIcon: {
    position: 'absolute',
    top: 0,
    right: 12,
  },
});
