import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  View,
  ScrollView,
} from 'react-native';
import HTMLView from 'react-native-htmlview'

import htmlStyles from '../components/htmlStyles'
import Heading from '../components/heading'
import ClearText from '../components/text'
import Button from '../components/button'
import Close from '../components/close'

export default class TimelineHeader extends Component {
  constructor(props) {
    super()
  }
  render() {
    if (!! this.props.tag) {
      return (
        <View style={styles.tagContainer}></View>
      )
    }
    else {
      const body = '<p>' + this.props.content.body + '</p>'
      return (
        <ScrollView contentContainerStyle={styles.container}>
          <View style={styles.body}>
            <Heading>HISTORY OF SURVEILLANCE</Heading>
            <HTMLView value={body} stylesheet={timelineHTMLStyles} onLinkPress={this.props.onLinkPress} />
            <Button buttonStyle={styles.buttonStyle} onPress={this.props.onClose} label={'VIEW THE TIMELINE'} />
          </View>
        </ScrollView>
      )
    }
  }
}

const styles = StyleSheet.create({
  container: {
    justifyContent: 'flex-start',
    alignItems: 'center',
  },
  body: {
    marginTop: 20,
    maxWidth: 650,
    marginBottom: 10,
    backgroundColor: 'black',
    padding: 40,
  },
  buttonStyle: {
    marginTop: 40,
    marginLeft: 0,
    marginRight: 0,
    marginBottom: 0,
  },
})

const timelineHTMLStyles =  StyleSheet.create({
  p: {
    color: 'white',  
    fontFamily: '"Futura-Medium", sans-serif',
    textAlign: 'justify',
    fontSize: 16,
    lineHeight: 30,
  },
  b: {
    fontFamily: '"Futura-MediumItalic", sans-serif',
    color: 'white',
    fontSize: 16,
    lineHeight: 30,
  },
  i: {
    color: 'white',
    fontFamily: '"Futura-MediumItalic", sans-serif',
    fontSize: 16,
    lineHeight: 30,
  },
  a: {
    color: 'white',
    fontFamily: '"Futura-Medium", sans-serif',
    textDecorationLine: 'underline',
    fontSize: 16,
    lineHeight: 30,
  },
})