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

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { compose } from 'redux';
import {
  StyleSheet,
  View,
} from 'react-native';

import { TabBar, TabView } from 'react-native-tab-view';
import { CommonLottieHeader } from 'react-native-spring-scrollview/Customize/CommonLottieHeader';
import { SpringScrollView } from 'react-native-spring-scrollview';
import { push } from '../../BasicNavigator/actions';
import decorator from '../../utils/decorator';
import TabBarIndicatorLinear from '../../components/TabBarIndicator';
import PolicyList from './PolicyList';
import {
  renderPolicyHeader,
  renderPolicyTab,
} from './policyRenderUtil';
import Styles from '../../theme/Styles';
import NavigationBar from '../../components/NavigationBar';

type Props = {};
const tabWidth = global.SCREEN_WIDTH / 4;


const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F5FCFF',
  },
  tab: {
    width: tabWidth,
  },
  label: {
    fontWeight: 'bold',
    fontSize: 16,
    //color: '#666',
  },
});

const typeArr : Array<> = [
  { key: 'ALL', title: '全部', type: 1 },
  { key: 'SAVE', title: '人寿', type: 41 },
  { key: 'EXPIRED', title: '财险', type: 10 },
  { key: 'EXPIRED2', title: '养老', type: 20 },
];

const typeData = {
  index: 0,
  routes: typeArr,
};


@decorator
class PolicyPage extends Component<Props> {
  constructor(props) {
    super(props);
    this.state = {
      type: typeData,
    };
  }

  onRefresh = () => {
    setTimeout(() => {
      this.policyScrollView.endRefresh();
    }, 3000);
  };

  _handleIndexChange = (index) => {
    console.log('_handleIndexChange:', index);
    const type = {
      index,
      routes: typeArr,
    };
    this.setState({ type });
  };

  _renderTabBar = item => (
    <TabBar
      {...item}
      scrollEnabled
      indicatorStyle={{ width: tabWidth }}
      style={{ backgroundColor: '#fff', height: 50 }}
      tabStyle={styles.tab}
      labelStyle={[styles.label]}
      activeColor={this.props.theme.ThemeColor}
      inactiveColor="#666"
      renderIndicator={props => (
        <TabBarIndicatorLinear {...props} />
      )}
    />
  )

  render() {
    return (
      <View style={[styles.container, { backgroundColor: '#fff' }]}>
        <NavigationBar
          style={{ zIndex: 4, backgroundColor: '#fff' }}
          textStyle={{ color: '#333' }}
          title="保险"
        />
        <SpringScrollView
          ref={(com) => {
            this.policyScrollView = com;
          }}
          onScroll={({ nativeEvent: { contentOffset: { x, y } } }) => {
            //console.log('offset : x=', x, 'y=', y);
          }}
          styles={Styles.container}
          inverted={false}
          onRefresh={this.onRefresh}
          //onLoading={this._onLoading}
          // allLoaded={this.state.allLoaded}
          refreshHeader={CommonLottieHeader}
        >
          {renderPolicyHeader(this.props)}
          {renderPolicyTab(this.props)}
          <View style={{ height: 43 }} />
          <TabView
            navigationState={this.state.type}
            renderScene={() => null}
            renderTabBar={this._renderTabBar}
            onIndexChange={this._handleIndexChange}
            keyboardDismissMode="none"
            lazy
            swipeEnabled={false}
            swipeDistanceThreshold={global.SCREEN_WIDTH / 10}
            initialLayout={{ width: global.SCREEN_WIDTH }}
          />
          <PolicyList style={{ flex: 1 }} />
        </SpringScrollView>
      </View>
    );
  }
}


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

function propsMapping({ theme }) {
  return {
    theme,
  };
}

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