
/**
 * 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 {
  StyleSheet,
  View,
} from 'react-native';

import { push } from '../../BasicNavigator/actions';
import { renderByType } from './serviceRenderUtil';
import NavigationBar from '../../components/NavigationBar';
import BackButton from '../../components/BackButton';
import decorator from '../../utils/decorator';
import { validateParams, validateAllParams } from '../../utils/validate';

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

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

const step = 13;

@decorator
class ServicePage extends Component<Props> {
  constructor(props) {
    super(props);
    console.log('constructor', this);
    this.state = {
      count: step,
      allLoaded: false,
    };
    this.scrollView = null;
  }


  _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, { backgroundColor: 'white' }]}>
        <NavigationBar
          style={{ backgroundColor: '#fff' }}
          textStyle={{
            color: '#333',
            fontSize: 17,
            fontWeight: '400',
          }}
          title="服务"
        />
        <SpringScrollView
          ref={ref => (this.scrollView = ref)}
          style={[styles.container, { backgroundColor: '#F4F5F5' }]}
          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 }) {
  return {
    theme,
  };
}

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