import React, { Component } from 'react'
import {
  Image,
  StyleSheet,
  TouchableOpacity,
  Text,
  View,
} from 'react-native'
import { Link } from 'react-router-dom'

export default class ClearText extends Component {
  render() {
    return (
      <View style={styles.footer}>
        <Link to='/page/privacy'>
          <View style={styles.footerItem}>
            <Text style={styles.footerText}>Privacy</Text>
          </View>
        </Link>
        <View style={styles.footerItem}>
          <TouchableOpacity onPress={() => this.props.onLinkPress('http://armoryonpark.org/')}>
            <Image source={require('../../img/armory.png')} resizeMode='contain' style={styles.footerLogo} />
          </TouchableOpacity>
        </View>
        <Link to='/page/credits'>
          <View style={styles.footerItem}>
            <Text style={styles.footerText}>Credits</Text>
          </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({
  footer: {
    position: 'fixed',
    bottom: 0,
    left: 0,
    width: '100%',
    height: isMobile ? 40 : 70,
    backgroundColor: 'black',
    paddingTop: isMobile ? 5 : 20,
    paddingBottom: isMobile ? 5 : 20,
    flexDirection: 'row',
    justifyContent: 'space-around',
    alignItems: 'center',
  },
  footerLogo: {
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    maxWidth: 140,
    maxHeight: 40,
    width: 260,
    height: 39,
  },
  footerItem: {
    height: 35,
    flex: 1,
    alignItems: 'center',
  },
  footerText: {
    fontFamily: 'Futura-Medium',
    color: 'white',
    fontSize: 10,
    flex: 1,
    padding: 10,
    marginTop: 4,
  }
})