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

import Heading from '../components/heading'

export default class ScrollableContainer extends Component {
  constructor(props) {
    super()
  }
  render() {
    const { heading, bodyStyle, headingOnPress, ...props } = this.props
    let headingEl;
    if (heading) {
      headingEl = (
        <Heading style={styles.heading} onPress={headingOnPress}>
          {heading.toUpperCase()}
        </Heading>
      )
    }
    else {
      headingEl = null
    }
    return (
      <View style={styles.container} {...props}>
        <ScrollView ref={(ref) => this.scrollView = ref} contentContainerStyle={[styles.body, bodyStyle]}>
          {headingEl}
          {this.props.children}
          <div style={{height: 40}}>footer</div>
        </ScrollView>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    width: '100vw',
    flex: 1,
    justifyContent: 'flex-start',
  },
  heading: {
  },
  body: {
    alignItems: 'center',
  },
})