
/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */

import React, { Component } from 'react';
import HeaderImageScrollView from 'react-native-image-header-scroll-view';
import {
  StyleSheet,
  View,
  RefreshControl,
  TouchableOpacity,
} from 'react-native';
import { connect } from 'react-redux';
import { compose } from 'redux';
import Text from '../../components/Text';
import { push } from '../../BasicNavigator/actions';


type Props = {};
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F5FCFF',
  },
  titleContainer: {
    flex: 1,
    alignSelf: 'stretch',
    justifyContent: 'flex-end',
    alignItems: 'center'
  },
  imageTitle: {
    color: 'white',
    backgroundColor: 'transparent',
    fontSize: 24
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

class ImageHeaderScrollView extends Component<Props> {
  render() {
    return (
      <View style={styles.container}>
        <HeaderImageScrollView
          maxHeight={200}
          minHeight={50}
          fadeOutForeground
          overScrollMode="never"
          overlayColor="red"
          maxOverlayOpacity={0.4}
          renderTouchableFixedForeground={() => (
            <View style={{ height: 200, justifyContent: 'center', alignItems: 'center' }}>
              <TouchableOpacity onPress={() => console.log('tap!!')} style={styles.button}>
                <Text style={styles.buttonText}>Click Me!</Text>
              </TouchableOpacity>
            </View>
          )}
          scrollViewBackgroundColor="#ddddff"
          refreshControl={
            <RefreshControl
              refreshing={false}
              // onRefresh={this._onRefresh.bind(this)}
              tintColor="red"
            />
          }
          renderForeground={() => (
            <View style={styles.titleContainer}>
              <Text style={styles.imageTitle}>Cat</Text>
            </View>
          )}
          foregroundParallaxRatio={1}
        >
          <View style={{ height: 100, backgroundColor: '#4CAF50' }} />
          <View style={{ height: 100, backgroundColor: '#F44336' }} />
          <View style={{ height: 100, backgroundColor: '#009688' }} />
          <View style={{ height: 100, backgroundColor: '#03A9F4' }} />
          <View style={{ height: 100, backgroundColor: '#FF9800' }} />
          <View style={{ height: 100, backgroundColor: '#673AB7' }} />
          <View style={{ height: 100, backgroundColor: '#795548' }} />
          <View style={{ height: 100, backgroundColor: '#FFEB3B' }} />
        </HeaderImageScrollView>
      </View>
    );
  }
}


function actionMapping(dispatch) {
  return {
    push: compose(dispatch, push),
  };
}

export default connect(null, actionMapping)(ImageHeaderScrollView);
