import React, { Component } from 'react';
import { View, Text, Image, Linking, StyleSheet, TouchableOpacity } from 'react-native';
import Icon from 'react-native-vector-icons/Ionicons';

class MyAbout extends Component {
	handleClick(url) {
		Linking.canOpenURL(url).then(supported => {
			if (supported) {
				Linking.openURL(url);
			} else {
				console.log('Don\'t know how to open URI: ', url);
			}
		});
	}

	render() {
		const casa = require('../../img/casa.png');

		const { textColor, viewStyle, iconStyle } = styles;
		return (
			<View style={{ flex: 1, padding: 20 }}>
			<Text style={{ fontSize: 20, alignSelf: 'center', fontWeight: '700' }}>
				ESPECIFICOS Buenos Aires
			</Text>

			<Image
			source={casa}
			style={{ width: 350, alignSelf: 'center', height: 220 }}
			resizeMode='contain'
			/>

			<TouchableOpacity
				style={viewStyle}
				onPress={() => this.handleClick('geo:-34.60761,-58.437967')}
			>

				<Icon size={30} style={[textColor, iconStyle]} name='md-pin' />
				<Text style={textColor}>
					Leopoldo Marechal 914, CABA, Argentina.
				</Text>

			</TouchableOpacity>

			<TouchableOpacity
				style={viewStyle}
				onPress={() => this.handleClick('tel:+541141396860')}
			>
				<Icon size={30} style={[textColor, iconStyle]} name='md-call' />
				<View>
				<Text style={textColor}>
				+5411 4139-6860/1
				</Text>
				<Text style={textColor}>
				+5411 4982-2892
				</Text>
				</View>
			</TouchableOpacity>

			<View style={viewStyle}>
			<Icon size={30 } style={[textColor, iconStyle]} name='md-time' />
			<Text style={textColor}>
				Abierto Lunes a Viernes 9 a 18 horas.
			</Text>
			</View>
			</View>
		);
	}
}

const styles = StyleSheet.create({
	viewStyle: {
		flexDirection: 'row',
		alignItems: 'center',
	},
	iconStyle: {
		margin: 5,
		marginRight: 10
	},
	textColor: {
		color: '#6281A2'
	}
});

export default MyAbout;