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

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

export default class Credits extends Component {
  constructor(props) {
    super()
  }
  render() {
    // let body = '<p>' + this.props.content.body + '</p>'
    let credits = this.props.content.body.split('\n').map( (s,i) => {
      s = s.replace('\r', '')
      if (s.match('~')) {
        s = s.replace('~ ', '').toUpperCase()
        style = styles.smallText
      }
      else {
        style = styles.text
      }
      return (
        <ClearText key={i} style={style}>{s}</ClearText>
      )
    })
    return (
      <ScrollableContainer heading='Production Credits'>
        <View style={styles.body}>
          {credits}
        </View>
      </ScrollableContainer>
    )
  }
}

const styles = StyleSheet.create({
  body: {
    width: '75%',
    alignItems: 'center',
    paddingBottom: 200,
  },
  smallText: {
    fontWeight: 'bold',
    fontSize: 13,
    marginTop: 20,
  },
  text: {
  },
})