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

const sections = [
  '/',
  '/timeline',
  '/drones',
  '/livestream',
  '/information',
  '/contact'
]
const images = [
  require('../../img/nav/sidebar/home.png'),
  require('../../img/nav/sidebar/timeline.png'),
  require('../../img/nav/sidebar/drones.png'),
  require('../../img/nav/sidebar/livestream.png'),
  require('../../img/nav/sidebar/information.png'),
  require('../../img/nav/sidebar/contact.png'),
]

export default class Nav extends Component {
  constructor() {
    super()
  }
  render() {
    let opacity = 1
    if (this.props.location.pathname === '/' || this.props.location.pathname === '/home' || this.props.location.pathname === '/site.html') {
      opacity = 0
    }
    const min = this.props.min || 0
    const max = this.props.max || 6
    const align = this.props.min == 0 ? styles.flexEnd : styles.flexStart
    const links = sections.map((path, i) => {
      const isSelected = this.props.location.pathname === path
      const image = images[i]
      return view(path, image, isSelected, align)
    }).filter( (a,i) => { return min <= i && i < max })
    return (
      <View style={[styles.nav, align, {opacity: opacity}]}>
        {links}
      </View>
    )
  }
}

function view (path, image, isSelected, align) {
  const key = 'link_' + (path.replace('/','') || 'home')
  const style = [styles.image]
  if (! isSelected) {
    style.push(styles.unselectedNavItem)
  }
  else {
    style.push(styles.selectedNavItem)
  }
  return (
    <View style={[styles.item, align]} key={key}>
      <Link to={path}>
        <View style={[styles.item, align]}>
          <Image key={'image_' + key} style={style} source={image} />
        </View>
      </Link>
    </View>
  )
}

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 styles = StyleSheet.create({
  nav: {
    width: '100%',
    height: 35,
    flex: 10,
    flexGrow: 2,
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'flex-end',
  },
  flexEnd: {
    alignItems: 'center',
    paddingRight: isMobile ? 5 : 10,
  },
  flexStart: {
    alignItems: 'center',
    paddingLeft: isMobile ? 5 : 10,
  },
  unselectedNavItem: {
    opacity: 0.5,
  },
  selectedNavItem: {
    opacity: 1.0,
  },
  item: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'flex-end',
  },
  image: {
    margin: "0 auto",
    justifyContent: 'center',
    alignItems: 'flex-end',
    width: isIphone ? 30 : 35,
    height: isIphone ? 30 : 35,
  },
})