import React, { Component } from 'react';
import {
    Platform,
    StyleSheet,
    Image,
    ListView,
    Text,
    ScrollView,
    TextInput,
    TouchableHighlight,
    View
} from 'react-native';

import RunInfo from './components/run-info';
import RunInfoNumeric from './components/run-info-num';

import MapView from 'react-native-maps';
const instructions = Platform.select({
  ios: 'Press Cmd+R to reload,\n' +
    'Cmd+D or shake for dev menu',
  android: 'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});

{/*<View style={{flex: 1}}>*/}
{/*<MapView style={styles.map}*/}
{/*showsUserLocation*/}
{/*followsUserLocation*/}
{/*initialRegion={{*/}
{/*latitude: 37.33307,*/}
{/*longitude: -122.0324,*/}
{/*latitudeDelta: 0.02,*/}
{/*longitudeDelta: 0.02*/}
{/*}}*/}
{/*/>*/}

type Props = {};
export default class App extends Component<Props> {
    constructor(props) {
        super(props);

        let ds = new ListView.DataSource({rowHasChanged: (a, b) => a !== b});
        this.state = {dataSource: ds.cloneWithRows([
            'john', 'joel', 'miki', 'iu lol', 'yeeet',
            'john', 'joel', 'miki', 'iu lol', 'yeeet',
            'john', 'joel', 'miki', 'iu lol', 'yeeet',
            'john', 'joel', 'miki', 'iu lol', 'yeeet',
            'john', 'joel', 'miki', 'iu lol', 'yeeet',
        ])};

        setInterval(() => {
            // this.distanceInfo.setState({value: Math.random() * 100});
            // this.speedInfo.setState({value: Math.random() * 15});
            // this.directionInfo.setState({value: this.directionInfo.state === 'N' ? 'NW' : 'N'});
        }, 1000);
    }
    render() {

       return (
           <ListView
               dataSource={this.state.dataSource}
               renderSeparator={() => <View style = {{backgroundColor: '#CCC', height: 1}}/>}
               renderRow={(row) => (
                   <View style={{flexDirection: 'row'}}>
                       <Image source = {{uri: 'https://i.imgur.com/Zbv1S4G.png'}} style = {{width: 50, margin: 10}}/>
                       <Text style = {{fontSize: 25, padding: 10}}>{row}</Text>
                   </View>
               )}
           />
//            <View style ={{flex: 1}}>
//                <TextInput
//                    style={styles.textInput}
//                    autoCapitalize="words"
//                    placeholder="Type something"
//                    onChangeText={(text) => this.setState({text})}
//                    onBlur={() => this.setState({ text: this.state.text.toUpperCase() })}
//                />
//
//                <TouchableHighlight
//                    onPress={() => this.setState({confirmedText: this.state.text})}
//                    onLongPress={() => this.setState({confirmedText: this.state.text.toLowerCase()})}
//                >
//                    <Text style={{fontSize: 16, backgroundColor: '#EEE', textAlign: 'center'}}>Press Me</Text>
//                </TouchableHighlight>
//
//                <Text style={{flex: 1, fontSize: 18}}>
//                    {this.state.confirmedText}
//                </Text>
//
//                <View style={styles.infoWrapper}>
//
//                    <RunInfoNumeric title = "Distance"
//                                    unit="km"
//                                    ref={(info) => this.distanceInfo = info}
//                    />
//                    <RunInfoNumeric title = "Speed"
//                                    unit="km/h"
//                                    ref={(info) => this.speedInfo = info}
//                    />
//                    <RunInfo title = "Direction"
//                             value = "NE"
//                             ref={(info) => this.directionInfo = info}
//                    />
//                </View>
//            </View>
    );
  }
}

const styles = StyleSheet.create({
    infoWrapper: {
        position: 'absolute',
        left: 0,
        bottom: 0,
        right: 0,
        flexDirection: 'row',
        flex: 1
    },
    map: {
        ...StyleSheet.absoluteFillObject
    },

  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});