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

import React, { useEffect, useState } from 'react';
import {
  View,
  StyleSheet,
  NativeAppEventEmitter, TouchableOpacity,
} from 'react-native';
import { compose } from 'redux';
import { connect } from 'react-redux';
import { LargeList } from 'react-native-largelist-v3';
import { TabView, TabBar } from 'react-native-tab-view';
import { push, tab } from '../../BasicNavigator/actions';
import NavigationBar from '../../components/NavigationBar';
import BackButton from '../../components/BackButton';

import Styles from '../../theme/Styles';
import Text from '../../components/Text';


type Props = {
  pushTo: ()=> void,
  tabTo: ()=> void,
  theme: Object,
};

const styles = StyleSheet.create({
  tabBar: {
    backgroundColor: 'white',
  },
  tab: {
    width: SCREEN_WIDTH / 3,
  },
  indicator: {
    backgroundColor: '#4ECBFC',
  },
  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 },
];

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

function JSPage(props: Props) {
  //console.log('JSPage props from lastPage', this.props.navigation.state);
  useEffect(() => {
    console.log('在 dep 改变时触发,若无 dep 则,每次更新组件都会触发');
    const didFocus = NativeAppEventEmitter.addListener('react_navigation_onTransitionEnd_call', () => {
      console.log('JSPage__didFocus');
    });
    return () => {
      console.log('在组件 unmount 时触发');
      if (didFocus) {
        didFocus.remove();
      }
    };
  });
  const [type, setType] = useState(typeData);
  const [data, setData] = useState([{items: [{ name: '我的保单', page: '' },]}]);

  const _handleIndexChange = (index) => {
    const _type = {
      index,
      routes: typeArr,
    };
    setType(_type);
  }
  const renderIndexPath = ({ section, row }) => {
    const { theme, pushTo } = props;
    const item = data[section].items[row];
    return (
      <View
        key={`${section}-${row}`}
        style={{ alignItems: 'stretch', justifyContent: 'center', backgroundColor: 'yellow'}}
      >
        <TouchableOpacity
          onPress={() => pushTo(item.page)}
        >
          <View style={{ alignItems: 'center', justifyContent: 'center' }}>
            <Text>
              {item.name}
            </Text>
          </View>
        </TouchableOpacity>
        <View style={Styles.line} />
      </View>
    );
  }

  const _renderScene = ({ route, jumpTo }) => {
    return (
      <LargeList
        style={[
          { flex:1},
        ]}
        data={data}
        heightForIndexPath={() => 50}
        renderIndexPath={renderIndexPath}
      />
    );
  }

  function _renderTabBar(item) {
    return (
      <TabBar
        {...item}
        scrollEnabled
        indicatorStyle={{ backgroundColor: props.theme.ThemeColor }}
        style={{ backgroundColor: '#fff' }}
        tabStyle={styles.tab}
        labelStyle={[styles.label]}
        activeColor={props.theme.ThemeColor}
        inactiveColor="#666"
      />
    );
  }

  return (
    <View style={Styles.container}>
      <NavigationBar
        style={{ backgroundColor: '#fff' }}
        textStyle={{
          color: '#333',
          fontSize: 17,
          fontWeight: '400',
        }}
        left={<BackButton style={{color: '#333',}} />}
        title="我的保单"
      />
      <View style={[Styles.container, { justifyContent: 'center' }]}>
        <TabView
          navigationState={type}
          renderScene={_renderScene}
          renderTabBar={_renderTabBar}
          onIndexChange={_handleIndexChange}
          lazy
          swipeEnabled={false}
          swipeDistanceThreshold={global.SCREEN_WIDTH / 10}
          initialLayout={{ width: global.SCREEN_WIDTH }}
        />
      </View>
    </View>
  );
}

function propsMapping(props) {
  const { nav, theme } = props;
  return {
    nav,
    theme,
  };
}
function actionMapping(dispatch) {
  return {
    pushTo: compose(dispatch, push),
    tabTo: compose(dispatch, tab),
  };
}
//const mapDispatchToProps = dispatch => (bindActionCreators({goNext}, dispatch))

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