import React, { Component } from 'react'
import {
  AppRegistry,
  Dimensions,
  Image,
  StyleSheet,
  StatusBar,
  Text,
  View
} from 'react-native'
import { Route, Link, Redirect, withRouter } from 'react-router-dom'

const window = Dimensions.get('window')

import db from '../db'

import Home from '../views/home'
import Nav from '../views/nav'
import Timeline from '../timeline'
import Drone from '../drone'
import Livestream from '../views/livestream'
import Information from '../views/information'
import Contact from '../views/contact'
import Credits from '../views/credits'
import Privacy from '../views/privacy'
import WebViewModal from '../components/webViewModal'
import Footer from '../components/footer'
import Header from '../components/header'

let touchTimeout;

class App extends Component {
  constructor() {
    super()
    this.state = {
      view: 'home',
      db: db.backup(),
      visitedTimeline: false,
      url: '',
    }

    // reset to home screen after some period of inactivity
    this.visitedTimeline = false
    
    this.onLinkPress = this.onLinkPress.bind(this)
    this.onCloseWebViewModal = this.onCloseWebViewModal.bind(this)

    db.fetch(data => this.setState({ db: data }))
  }
  onLinkPress(url) {
    if (url.indexOf('/') === 0) {
      this.props.history.push(url)
    }
    else {
      global.open(url)
    }
  }
  onCloseWebViewModal() {
    this.setState({ url: '' })
  }
  render() {
    return (
      <View style={styles.container}>
        <Route path='/' render={(props) => {
          return ( <Header location={props.location} /> )
        }}/>
        <View style={styles.inner}>
          <Route exact path='/' render={(props) => (
            <Home />
          )}/>
          <Route path='/site.html' render={(props) => (
            <Home />
          )}/>
          <Route path='/timeline' render={(props) => {
            if (! this.visitedTimeline) {
              setTimeout(() => {
                this.visitedTimeline = true
              }, 600)
            }
            else if (this.timelineView) {
              setImmediate( () => this.timelineView.onFilter('') )
            }
            return (
              <Timeline
                ref={(ref) => this.timelineView = ref}
                firstTime={! this.visitedTimeline}
                content={this.state.db.page['history-of-surveillance']}
                events={this.state.db.timeline}
                onLinkPress={this.onLinkPress}
                {...props}
              />
            )
          }}/>
          <Route path='/drones' render={(props) => (
            <Drone
              content={this.state.db.drone}
              onLinkPress={this.onLinkPress}
              {...props}
            />
          )}/>
          <Route path='/livestream' render={(props) => (
            <Livestream
              content={this.state.db.stream}
              {...props}
            />
          )}/>
          <Route path='/information' render={(props) => (
            <Information  
              essays={this.state.db.essay}
              content={this.state.db.about}
              onLinkPress={this.onLinkPress}
              {...props}
            />
          )}/>
          <Route path='/page/credits' render={(props) => (
            <Credits
              content={this.state.db.page['credits']}
              onLinkPress={this.onLinkPress}
              {...props}
            />
          )}/>
          <Route path='/page/privacy' render={(props) => (
            <Privacy
              content={this.state.db.page['privacy-policy']}
              onLinkPress={this.onLinkPress}
              {...props}
            />
          )}/>
          <Route path='/contact' render={(props) => (
            <Contact
              content={this.state.db.page['contact']}
              comments={this.state.db.comments}
              {...props}
            />
          )}/>

        </View>
        <Footer onLinkPress={this.onLinkPress} />
        <StatusBar hidden />
      </View>
    )
  }
}




//         <Redirect to="/" />

export default App

const styles = StyleSheet.create({
  container: {
    width: '100%',
    height: '100%',
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#000000',
  },
  inner: {
    flex: 1,
    flexDirection: 'row',
    height: window.innerHeight - 50 - 50,
  },
  logo: {
    marginTop: 0,
    height: 50,
    marginBottom: 10,
  }
})