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

import React, { useEffect } from 'react';
import {
  View,
  NativeAppEventEmitter,
} from 'react-native';
import { compose } from 'redux';
import { connect } from 'react-redux';
import { push, tab } from '../../BasicNavigator/actions';
import NavigationBar from '../../components/NavigationBar';
import BackButton from '../../components/BackButton';
import Button from '../../components/ThemeButton';
import Styles from '../../theme/Styles';
import Text from '../../components/Text';

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

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',props.nav);
    })
    return () => {
      console.log('在组件 unmount 时触发');
      if(didFocus){
        didFocus.remove();
        console.log('JSPage__didFocus.remove');
      }
    };
  })

  return (
    <View style={Styles.container}>
      <NavigationBar
        left={<BackButton />}
        title="ThemeDemo"
      />
      <View style={[Styles.container, { justifyContent: 'center' }]}>
        <Text style={Styles.instructions}>第一个页面</Text>
        <Button
          containerStyle={{ height: 40, margin: 10 }}
          onPress={() => { props.pushTo('NativePage', { may: '22' }); }}
          title="跳转第二个页"
        />
        <Button
          containerStyle={{ height: 40, margin: 10 }}
          onPress={() => { props.tabTo('ServicePage'); }}
          title="返回首页Tab切换"
        />
      </View>
    </View>
  );
}

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

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