
/**
 * 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 { connect } from 'react-redux';
import { compose } from 'redux';
import FastImage from 'react-native-fast-image';
import {
  View,
} from 'react-native';

import Text from '../../components/Text';
import styles from '../../theme/Styles';
import { push } from '../../BasicNavigator/actions';
import { renderByType } from './userRenderUtil';
import { UserPageHeader } from '../../components/HeaderView';
import { resourceURLMapping, ENV } from '../../utils/constants';


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


type Props = {};

const step = 13;

class FramePage extends Component<Props> {
  constructor(props) {
    super(props);
    this.state = {
      count: step,
      allLoaded: false,
    };
    this.scrollView = null;
  }


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


  render() {
    const { theme,pushTo } = this.props;
    const imgWidth = global.SCREEN_WIDTH - 10;
    const imgHeight = (global.SCREEN_WIDTH - 10) / 345 * 160;
    return (
      <View style={[styles.container,{backgroundColor: 'white'}]}>
        <UserPageHeader phone="138****8888" color={theme.ThemeColor} />
        <SpringScrollView
          ref={ref => (this.scrollView = ref)}
          style={[styles.container,{backgroundColor: 'white'}]}
          inverted={false}
          onRefresh={this._onRefresh}
          //onLoading={this._onLoading}
          // allLoaded={this.state.allLoaded}
          refreshHeader={CommonLottieHeader}
          //loadingFooter={CommonLottieFooter}
        >
          <View style={{ marginLeft: 5 }}>
            <FastImage
              style={{
                width: imgWidth,
                height: imgHeight,

              }}
              source={{
                uri: `${resourceURLMapping[ENV]}pic_user_top_tpjb.png`,
                priority: FastImage.priority.normal,
              }}
              resizeMode={FastImage.resizeMode.stretch}
            />
            <View
              style={{
                width: imgWidth,
                height: imgHeight - 20,
                justifyContent: 'center',
                alignItems: 'center',
                position: 'absolute',
                top: 0,
                left: 0,
                right: 0,
                bottom: 0,
                zIndex: 3,
              }}
            >
              <Text style={{ color: 'white', fontSize: 14,}}>
              太平金币
              </Text>
              <Text style={{ color: 'white',fontWeight: '400', fontSize: 40, }}>
              1888
              </Text>
              <Text style={{ color: 'white', fontSize: 12, }}>
                {'查看详情 >'}
              </Text>
            </View>
          </View>

          {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)(FramePage);
