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

import React, { Component } from 'react';
import { SpringScrollView } from 'react-native-spring-scrollview';
import { CommonLottieHeader } from 'react-native-spring-scrollview/Customize/CommonLottieHeader';
//import CommonLottieFooter from 'react-native-spring-scrollview/Customize/CommonLottieFooter';
import { connect } from 'react-redux';
import { compose } from 'redux';
import {
  NativeAppEventEmitter,
  StyleSheet,
  BackHandler,
  View,
} from 'react-native';

import { push } from '../../BasicNavigator/actions';
import { renderByType } from './homeRenderUtil';
import { HomeHeader } from '../../components/HeaderView';

const data = require('./home.json');

type Props = {};
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F5FCFF',
  },
});

const step = 13;

class HomePage extends Component<Props> {
  constructor(props) {
    super(props);
    this.state = {
      count: step,
      allLoaded: false,
    };
    this.scrollView = null;
  }
  componentDidMount() : void {
    this.listener =NativeAppEventEmitter.addListener('react_navigation_onTransitionEnd_call',() => console.log('onTransitionEnd_call'))

  }

  componentWillUnmount() : void {
    if(this.listener){
      this.listener.remove();
    }

  }


  _onRefresh = () => {
    setTimeout(() => {
      this.scrollView.endRefresh();
      this.setState({ count: step, allLoaded: false });
    }, 3000);
  };

  _onLoading = () => {
    setTimeout(() => {
      this.scrollView.endLoading();
      this.setState(p => ({
        count: p.count + step,
        allLoaded: false,
      }));
    }, 3000);
  };

  render() {
  const { pushTo } = this.props
    return (
      <View style={styles.container}>
        <HomeHeader />
        <SpringScrollView
          ref={ref => (this.scrollView = ref)}
          style={styles.container}
          inverted={false}
          onRefresh={this._onRefresh}
          //onLoading={this._onLoading}
          // allLoaded={this.state.allLoaded}
          refreshHeader={CommonLottieHeader}
          //loadingFooter={CommonLottieFooter}
        >
          {data.map((item, index) => (
            renderByType(item.type)({
              ...item,
              width: global.SCREEN_WIDTH,
              pushTo,
            })
          ))}
        </SpringScrollView>
      </View>
    );
  }
}


function actionMapping(dispatch) {
  return {
    pushTo: compose(dispatch, push),
  };
}
function propsMapping({ theme, nav }) {
  return {
    theme,
    nav,
  };
}

export default connect(propsMapping, actionMapping)(HomePage);
