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

import ScrollableContainer from '../components/scrollableContainer'
import ClearText from '../components/text'
import Heading from '../components/heading'
import Touchable from '../components/touchable'

const countryLinks = {
  pakistan: 'https://www.thebureauinvestigates.com/projects/drone-war/charts?show_casualties=1&show_injuries=1&show_strikes=1&location=pakistan&from=2004-1-1&to=now',
  yemen: 'https://www.thebureauinvestigates.com/projects/drone-war/charts?show_casualties=1&show_injuries=1&show_strikes=1&location=yemen&from=2002-1-1&to=now',
  somalia: 'https://www.thebureauinvestigates.com/projects/drone-war/charts?show_casualties=1&show_injuries=1&show_strikes=1&location=somalia&from=2007-1-1&to=now',
  afghanistan: 'https://www.thebureauinvestigates.com/projects/drone-war/charts?show_casualties=1&show_injuries=1&show_strikes=1&location=afghanistan&from=2015-1-1&to=now',
}

export default class Drone extends Component {
  constructor(props) {
    super()
  }
  render() {
    const content = this.props.content
    const links = content.links.map((link,i) => {
      const url = link.uri
      const name = link.text
      return (
        <Touchable key={'link_' + i} onPress={() => this.props.onLinkPress(url)}>
          <ClearText style={styles.link}>{name}</ClearText>
        </Touchable>
      )
    })
    return (
      <ScrollableContainer heading='Military Drone Statistics' bodyStyle={styles.scrollContainer}>

        <ClearText style={styles.body}>
          {content.intro}
        </ClearText>

        <Heading style={styles.subheading}>STATISTICS</Heading>

        <View style={styles.statistics}>
          <View style={styles.statistic}>
            <ClearText style={styles.statisticNumber}>{content.strikes}</ClearText>
            <ClearText style={styles.statisticLabel}>MINIMUM CONFIRMED STRIKES</ClearText>
          </View>

          <View style={styles.statistic}>
            <ClearText style={styles.statisticNumber}>{content.totalKilled}</ClearText>
            <ClearText style={styles.statisticLabel}>TOTAL KILLED</ClearText>
          </View>
        </View>

        <View style={styles.statistics}>
          <View style={styles.statistic}>
            <ClearText style={styles.statisticNumber}>{content.civiliansKilled}</ClearText>
            <ClearText style={styles.statisticLabel}>CIVILIANS KILLED</ClearText>
          </View>

          <View style={styles.statistic}>
            <ClearText style={styles.statisticNumber}>{content.childrenKilled}</ClearText>
            <ClearText style={styles.statisticLabel}>CHILDREN KILLED</ClearText>
          </View>
        </View>

        <ClearText style={styles.body}>
          {content.statisticsByline}
        </ClearText>

        <View style={styles.countries}>
          <View style={styles.country}>
            <Touchable onPress={() => this.props.onLinkPress(countryLinks.afghanistan)}>
              <Image source={require('../../img/afghanistan.png')} resizeMode='cover' style={styles.countryImage} />
              <ClearText>AFGHANISTAN</ClearText>
            </Touchable>
          </View>

          <View style={styles.country}>
            <Touchable onPress={() => this.props.onLinkPress(countryLinks.pakistan)}>
              <Image source={require('../../img/pakistan.png')} resizeMode='cover' style={styles.countryImage} />
              <ClearText>PAKISTAN</ClearText>
            </Touchable>
          </View>
        </View>

        <View style={styles.countries}>
          <View style={styles.country}>
            <Touchable onPress={() => this.props.onLinkPress(countryLinks.yemen)}>
              <Image source={require('../../img/yemen.png')} resizeMode='cover' style={styles.countryImage} />
              <ClearText>YEMEN</ClearText>
            </Touchable>
          </View>

          <View style={styles.country}>
            <Touchable onPress={() => this.props.onLinkPress(countryLinks.somalia)}>
              <Image source={require('../../img/somalia.png')} resizeMode='cover' style={styles.countryImage} />
              <ClearText>SOMALIA</ClearText>
            </Touchable>
          </View>
        </View>
        
        <ClearText style={styles.body}>
          {content.moreInfo}
        </ClearText>
        
        <View style={styles.links}>
          {links}
        </View>

      </ScrollableContainer>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'flex-start',
    alignItems: 'flex-start',
    width: '100%',
  },
  scrollContainer: {
    justifyContent: 'flex-start',
    alignItems: 'center',
    width: '100%',
  },
  body: {
    textAlign: 'left',
    padding: 10,
    width: '90%',
    maxWidth: '600px',
    paddingBottom: 20,
    paddingLeft: 20,
  },
  hero: {
    width: '100%',
    height: 400,
  },
  subheading: {
    textAlign: 'center',
    width: '100%',
  },
  statistics: {
    width: '90%',
    maxWidth: '650px',
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'flex-start',
    alignItems: 'flex-start',
    marginLeft: 20,
  },
  statistic: {
    flex: 1,
    flexBasis: '50%',
    backgroundColor: 'white',
    padding: 10,
    margin: 10,
  },
  statisticNumber: {
    fontSize: 36,
    lineHeight: 48,
    fontWeight: 'bold',
    color: 'black',
    textAlign: 'left',
  },
  statisticLabel: {
    textAlign: 'left',
    color: 'black',
    fontSize: 13,
  },
  countries: {
    width: '90%',
    maxWidth: '650px',
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    paddingRight: 20,
    marginLeft: 30,
  },
  country: {
    justifyContent: 'center',
    alignItems: 'center',
    flex: 1,
    flexBasis: '50%',
    padding: 10,
    margin: 5,
    aspectRatio: 1,
  },
  countryImage: {
    flex: 1,
    aspectRatio: 1,
    borderWidth: 1,
    borderColor: 'white',
    marginBottom: 5,
    width: '35vw',
    height: '35vw',
    maxWidth: '300px',
    maxHeight: '300px',
  },
  links: {
    maxWidth: '650px',
    width: '75%',
    alignItems: 'flex-start',
    marginBottom: 80,
    marginLeft: 75,
  },
  link: {
    justifyContent: 'flex-start',
    alignItems: 'flex-start',
    textDecorationLine: 'underline',
    padding: 5,
  },
})