import React, { Component } from 'react';
import {
  Image,
  StyleSheet,
  TouchableOpacity,
  View,
  Platform
} from 'react-native';
import { Link } from 'react-router-dom'
import ClearText from '../components/text'
import FadeInView from 'react-native-fade-in-view'

const sections = [
  '/timeline',
  '/drones',
  '/livestream',
  '/information',
  '/contact'
]
const labels = [
  'SURVEILLANCE',
  'MILITARY DRONE STATISTICS',
  'LIVESTREAM',
  'ABOUT THIS WORK',
  'CONTACT',
]
const images = [
  require('../../img/nav/home/timeline.png'),
  require('../../img/nav/home/drones.png'),
  require('../../img/nav/home/livestream.png'),
  require('../../img/nav/home/information.png'),
  require('../../img/nav/home/contact.png'),
]

export default class Home extends Component {
  constructor() {
    super()
  }
  render() {
    const links = sections.map((path, i) => {
      const image = images[i]
      const label = labels[i]
      return view(path, image, label)
    })
    if (navigator.userAgent.match('Firefox')) {
      return (
        <View style={styles.container}>
          {links}
        </View>
      )
    }
    else {
      return (
        <FadeInView duration={500} style={styles.container}>
          {links}
        </FadeInView>
      )
    }
  }
}

function view (path, image, label, isSelected) {
  let key = ('home_' + path).replace('/','')
  let imageKey = 'image_' + key + String(isSelected)
  return (
    <Link to={path} key={key}>
      <View style={styles.navItem}>
        <Image key={imageKey} style={styles.image} source={image} />
        <ClearText style={styles.text}>{label}</ClearText>
      </View>
    </Link>
  )
}

const isIphone = (navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))
const isIpad = (navigator.userAgent.match(/iPad/i))
const isAndroid = (navigator.userAgent.match(/Android/i))
const isMobile = isIphone || isIpad || isAndroid
const isDesktop = ! isMobile

const shortHeight = isIphone || window.innerHeight < 700

const buttonSide = shortHeight ? 50 : 70
const buttonMargin = shortHeight ? 5 : 10

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    marginTop: -80
  },
  navItem: {
    justifyContent: 'center',
    alignItems: 'center',
    minHeight: shortHeight ? '10vh' : '13vh',
  },
  text: {
    lineHeight: 16,
    marginBottom: shortHeight ? 5 : 10,
  },
  image: {
    width: buttonSide,
    height: buttonSide,
    margin: buttonMargin,
  }
})