import React from 'react';
import {
  Linking,
  StyleSheet,
  Text,
  TouchableNativeFeedback,
  View,
  ViewStyle,
} from 'react-native';
import { Icon } from 'react-native-elements';
import { Location } from '../../models';
import { Card } from '../ui';

interface Props {
  googleId?: string;
  location: Location;
  style?: ViewStyle;
  onEditRequest?: () => void;
}

export class LocationInfo extends React.Component<Props> {

  onPress = () => {
    const { location: { latitude, longitude, googleID } } = this.props;
    if (googleID) {
      // tslint:disable-next-line:max-line-length
      Linking.openURL(`https://www.google.com/maps/search/?api=1&query=${latitude},${longitude}&query_place_id=${googleID}`);
    } else {
      Linking.openURL(`https://www.google.com/maps/search/?api=1&query=${latitude},${longitude}`);
    }
  }

  render() {
    const { location, style, onEditRequest } = this.props;
    return (!!location || onEditRequest) && (
      <Card title='Lokalizacja' style={{ padding: 0 }}>
        <TouchableNativeFeedback onPress={onEditRequest || this.onPress}>
          <View style={[styles.container, style, !location ? { flexDirection: 'column' } : {}]}>
            <View style={styles.info}>
              {location && (location.name || location.address) && (
                <View>
                  <Text style={styles.name} numberOfLines={1}>
                    {location.name}
                  </Text>
                  <Text style={styles.address}>
                    {location.address}
                  </Text>
                </View>
              )}
              {location && !(location.name || location.address) && (
                <View>
                  <Text style={styles.address}>
                    {location.latitude}
                  </Text>
                  <Text style={styles.address}>
                    {location.longitude}
                  </Text>
                </View>
              )}
            </View>
            {onEditRequest && (
              <Icon
                name={'edit-location'}
                size={24}
                color={'gray'}
                containerStyle={{ flex: 1 }}
                onPress={onEditRequest}
              />
            ) || (
                <Icon
                  name={'map'}
                  size={24}
                  color={'gray'}
                  containerStyle={{ flex: 1 }}
                />
              )}
          </View>
        </TouchableNativeFeedback>
      </Card>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    padding: 12,
    flexDirection: 'row',
    justifyContent: 'space-between',
  },
  name: {
    fontWeight: 'bold',
    fontSize: 14,
  },
  address: {
    fontSize: 12,
  },
  info: {
    flex: 10,
    marginVertical: 4,
    alignItems: 'flex-start',
  },
});
