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

import ScrollableContainer from '../components/scrollableContainer'
import ClearText from '../components/text'

export default class Privacy extends Component {
  constructor(props) {
    super()
  }
  render() {
    let body = this.props.content.body
    return (
      <ScrollableContainer heading='Privacy Policy'>
        <View style={styles.body}>
          <HTMLView value={body} stylesheet={htmlStyles} renderNode={renderNode} onLinkPress={this.props.onLinkPress} />
        </View>
      </ScrollableContainer>
    )
  }
}

function renderNode (node, index) {
  if (node.name === 'hr') {
    return ( <View key={index} style={styles.hr} /> )
  }
  // console.warn(node.name)
}

const styles = StyleSheet.create({
  body: {
    width: '90%',
    maxWidth: '650px',
    paddingBottom: 200,
  },
  hr: {
    width: 50,
    height: 2,
    backgroundColor: '#fff',
    marginBottom: 20,
  },
})

const htmlStyles = StyleSheet.create({
  p: {
    color: 'white',  
    fontFamily: '"Futura-Medium", sans-serif',
    textAlign: 'justify',
    fontSize: 16,
    lineHeight: 30,
    margin: 0,
  },
  li: {
    color: 'white',  
    fontFamily: '"Futura-Medium", sans-serif',
    textAlign: 'justify',
    fontSize: 16,
    lineHeight: 30,
    margin: 0,
  },
  b: {
    fontFamily: '"Futura-MediumItalic", sans-serif',
    color: 'white',
    fontSize: 16,
    lineHeight: 30,
  },
  i: {
    fontFamily: '"Futura-MediumItalic", sans-serif',
    color: 'white',
    fontSize: 16,
    lineHeight: 30,
  },
  a: {
    color: 'white',
    fontFamily: '"Futura-Medium", sans-serif',
    textDecorationLine: 'underline',
    fontSize: 16,
    lineHeight: 30,
  },
  h1: {
    color: 'white',
    fontFamily: '"Futura-Medium", sans-serif',
    fontSize: 24,
    lineHeight: 40,
    margin: 0,
  },
  h2: {
    color: 'white',
    fontFamily: '"Futura-Medium", sans-serif',
    fontSize: 20,
    lineHeight: 32,
    margin: 0,
  },
  h3: {
    color: 'white',
    fontFamily: '"Futura-Medium", sans-serif',
    fontSize: 16,
    lineHeight: 30,
    fontWeight: 'bold',
    margin: 0,
  },
})