import React, { Component } from 'react';
import {
  StyleSheet,
  Image,
  View
} from 'react-native';

import ClearText from '../components/text'
import Touchable from '../components/touchable'

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 isFirefox = navigator.userAgent.match('Firefox')

const imageHeight = isMobile ? 70 : 100
const imageWidth = isMobile ? 100 : 150

export default class TimelineEvent extends Component {
  constructor() {
    super()
  }
  render() {
    const item = this.props.item
    let image;
    if (item.image && item.image.uri) {
      const originalWidth = Number(item.image.width)
      const originalHeight = Number(item.image.height)
      let height = originalHeight > imageHeight ? imageHeight : originalHeight
      let width = originalWidth * height / originalHeight
      if (width > imageWidth) {
        width = imageWidth
        height = originalHeight * imageWidth / originalWidth
      }
      if (isNaN(width) || isNaN(height)) {
        console.log(width, height, item.image.uri)
      }
      image = <img
        src={item.image.uri}
        style={{
          width: width,
          height: height,
        }} />
    } else {
      image = <View></View>
    }
    
    let imageContainer;
    if (isMobile) {
      imageContainer = null
    }
    else {
      imageContainer = ( <View style={styles.imageContainer}>{image}</View> )
    }
    return (
      <Touchable style={styles.item} onPress={() => this.props.onPress(this.props.item) }>
        <View style={styles.item}>
          <div ref={(ref) => this.ref = ref}></div>
          <View style={styles.dateContainer}>
            <ClearText style={styles.date}>{item.date}</ClearText>
          </View>
          {imageContainer}
          <View style={styles.titleContainer}>
            <ClearText style={styles.title}>{item.title}</ClearText>
          </View>
        </View>
      </Touchable>
    )
  }
}

const styles = StyleSheet.create({
  item: {
    flex: 1,
    width: '80%',
    justifyContent: 'flex-start',
    alignItems: 'center',
    flexDirection: 'row',
    padding: 10,
    marginBottom: 10,
    minHeight: 100,
  },
  dateContainer: {
    width: isMobile ? '50%' : '30%',
    justifyContent: 'flex-start',
    alignItems: 'center',
    paddingRight: 10,
    paddingLeft: 30,
  },
  imageContainer: {
    width: '40%',
    justifyContent: 'flex-start',
    alignItems: 'center',
    marginRight: 10,
  },
  titleContainer: {
    width: isMobile ? '50%' : '30%',
    justifyContent: 'flex-start',
    alignItems: 'center',
    paddingLeft: 10,
  },
  title: {
    textAlign: 'center',
    fontWeight: 'bold',
  },
  date: {
    textAlign: 'center',
  },
})