import React from 'react';
import { View, TouchableOpacity, StyleSheet, Text, Platform } from 'react-native';
import { Avatar } from 'react-native-elements';

import colors from '../../config/colors.json';


export default class ProfileSearchScreen extends React.Component {

  render() {
    return (
      <View style={styles.container}>
        <Text style={{ color: '#416788', fontSize: 18, textAlign: 'center', marginTop: 10 }}>Make Connections via</Text>
        <HorizontalCard 
          flex={0.2} 
          text='Scan QR Code'
          icon={{ name: 'qrcode-scan', type: 'material-community' }}
          color={colors.buttonBlue}
          onPress={() => this.props.navigation.navigate('profileQRScan')}
        />
        <HorizontalCard 
          flex={0.2} 
          text='Scan business cards'
          icon={{ name: 'id-card', type: 'font-awesome' }}
          color={colors.teal}
        />
        <VerticalCard 
          flex={0.33} 
          text='Transfer Tagfer IDs'
          icon={{ name: 'md-search', type: 'ionicon', size: 50 }}
          color={colors.darkOrange}
        />
      </View>
    );
  }
}

const HorizontalCard = ({ flex, text, icon, color, onPress }) => (
  <View style={{ flex }}>
    <TouchableOpacity style={styles.cardContainer('row')} onPress={onPress}>
      <View style={{ flex: 0.4, alignItems: 'center', justifyContent: 'center' }}>
        <Avatar 
          large
          rounded
          icon={icon}
          containerStyle={{ backgroundColor: color }}
        />
      </View>
      <View style={{ flex: 0.6, alignItems: 'flex-start', justifyContent: 'center' }}>
        <Text style={{ fontSize: 26, color }}>{text}</Text>
      </View>
    </TouchableOpacity>
  </View>
);

const VerticalCard = ({ flex, text, icon, color, onPress }) => (
  <View style={{ flex }}>
    <TouchableOpacity style={styles.cardContainer('column')} onPress={onPress}>
      <View style={{ flex: 0.4, alignItems: 'center', justifyContent: 'center', marginTop: 20 }}>
        <Avatar 
          large
          rounded
          icon={icon}
          containerStyle={{ backgroundColor: color }}
        />
      </View>
      <View style={{ flex: 0.6, alignItems: 'center', justifyContent: 'center' }}>
        <Text style={{ fontSize: 26, color }}>{text}</Text>
        <Text style={{ fontSize: 16, color: '#8A8A8A', marginTop: 10 }}>Choose which profiles to connect with</Text>
      </View>
    </TouchableOpacity>
  </View>
);

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: colors.offWhite
  },
  cardContainer: (flexDirection) => ({
    flex: 1,
    flexDirection,
    backgroundColor: 'white',
    borderColor: '#e1e8ee',
    borderWidth: 1,
    margin: 15,
    marginBottom: 0,
    ...Platform.select({
      ios: {
        shadowColor: 'rgba(0,0,0, .2)',
        shadowOffset: { height: 0, width: 0 },
        shadowOpacity: 1,
        shadowRadius: 2,
      },
      android: {
        elevation: 1,
      },
    }),
  })
});
