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

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

export const EmployerDetails: React.SFC<Props> = ({ user, footer }) => (
  <ScrollView>
    <View style={styles.container}>
      <PhotoArea photoUrl={user.avatar} />
      <Card title='Podstawowe informacje'>
        <View>
          <DataElement label='Nazwa/Imię i nazwisko' data={user.name} />
          {user.email && (
            <DataElement
              label='Email'
              data={user.email}
              onPress={() => Linking.openURL(`mailto:${user.email}`)}
            />
          )}
          {user.phoneNumber && (
            <View style={styles.phoneRow}>
              <DataElement
                label='Telefon'
                data={user.phoneNumber}
                onPress={() => Linking.openURL(`tel:${user.phoneNumber}`)}
              />
              <Icon
                color={'gray'}
                size={24}
                containerStyle={{ marginRight: 12 }}
                name='phone'
                onPress={() => Linking.openURL(`tel:${user.phoneNumber}`)}
              />
            </View>
          )}
          {user.website && (
            <DataElement
              label='Strona internetowa'
              data={user.website}
              onPress={() => Linking.openURL(user.website)}
            />)}
          {user.description && <DataElement label='Opis' data={user.description} />}
        </View>
      </Card>
      {
        !user.businessLocation
          ? null
          : <LocationInfo
            location={user.businessLocation}
          />
      }
    </View>
    {footer}
  </ScrollView>
);

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'flex-start',
  },
  phoneRow: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
  },
  editIcon: {
    position: 'absolute',
    top: 0,
    right: 12,
  },
});
