import React from 'react';
import { Font, AppLoading, Permissions, MapView, BlurView } from "expo";
import { StyleSheet, Text, TouchableOpacity, TouchableHighlight, View } from 'react-native';
import data from './data';
// NOTE: import { StyleSheet } from 'react-native'; is required in this file,
// too, even though it is not used directly here.
import styles from './styles';

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: true,
      region: null,
    };
  }

  async componentDidMount() {
    await Font.loadAsync({
      'Raleway': require('./assets/Raleway-Light.ttf')
    });
    await Permissions.askAsync(Permissions.LOCATION);
    this.setState({ loading: false });
  }

  closeMapView = () => this.setState({ region: null });

  renderMapView = () => (
    <View style={styles.topWrapper}>
      <BlurView
        tint="dark"
        intensity={60}
        style={[StyleSheet.absoluteFill, styles.blurWrapper]}
      >
        <View style={styles.mapWrapper}>
          <View style={styles.roundedWrapper}>
            <MapView style={styles.map} region={this.state.region}>
              <MapView.Marker
                title="You're here"
                coordinate={this.state.region}
                pinColor="red"
              />
            </MapView>
            <TouchableOpacity
              style={styles.button}
              onPress={this.closeMapView}
              activeOpacity={1}
            >
              <Text style={styles.buttonText}>close the map</Text>
            </TouchableOpacity>
          </View>
        </View>
      </BlurView>
    </View>
  );

  renderCard = (word, country, { latitude, longitude }) => (
    <TouchableOpacity
      style={styles.card}
      onPress={() => this.setState({
        region: { latitude, longitude, latitudeDelta: 0.1, longitudeDelta: 0.05 }
      })}
    >
      <Text style={styles.header}>{word}</Text>
      <Text style={styles.sub}>{country}</Text>
    </TouchableOpacity>
  );

  renderCards = () => (
    <View style={styles.container}>
      {data.map(({ name, country, region }) => (
        <View key={name}>
          {this.renderCard(name, country, region)}
        </View>
      ))}
    </View>
  );

  render() {
    const { loading, region } = this.state;
    if (loading) return <AppLoading />;
    return (
      <View style={styles.center}>
        {region !== null && this.renderMapView()}
        <View style={styles.container}>{this.renderCards()}</View>
      </View>
    );
  }
}