/**
 * @flow
 * Created by shiyunjie on 2018/8/4.
 */
import React, { Component } from 'react';
import {
  View,
  Text,
  Image,
  BackHandler,
} from 'react-native';
import { connect } from 'react-redux';
import { compose } from 'redux';
import Button from '../../components/ThemeButton';
import NavigationBar, { NavHeight } from '../../components/NavigationBar';
import { pop, push } from '../../BasicNavigator/actions';
import StyleSheet from '../../utils/StyleSheet';

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
  },
  text: { fontSize: 16, color: '#666' },
});


type Props = {
  pushTo : () => void,
  pop : () => void,
  activeFirst : () => void,
  routes : Array,
  success : boolean,
  flag : string,
  desc : string,
  reportNo : string,
  popAppointPage? : () => void
}

type State = {
  date : string,
  showModal : boolean,
  address : string,
  area : string,
  nature : string,
  hospitals : Array,
}


class ResultPage extends Component {
  state : State

  componentWillMount() {
    BackHandler.addEventListener('hardwareBackPress', this.onBackPressed);
  }

  componentWillUnmount() {
    BackHandler.removeEventListener('hardwareBackPress', this.onBackPressed);
  }

  onBackPressed = () => {
    this.popToHome();
    return true;
  }

  popToHome = () => {
    const { popTo } = this.props;
    popTo('TabPage');
  }

  render() {
    return (
      <View style={styles.container}>
        <NavigationBar
          title="太平保险"
          left={<View />}
        />
        <View
          style={{
            flex: 1,
            flexDirection: 'column',
            alignItems: 'center',
          }}
        >
          <View
            style={{
              width: 84,
              height: 84,
              justifyContent: 'center',
              alignItems: 'center',
              marginTop: 32,
            }}
          >
            <Image source={require('./img/success.png')} />
          </View>
          <Text
            style={[
              styles.text,
              {
                fontSize: 18,
                marginTop: 24,
                fontWeight: 'bold',
              }]}
          >
            支付成功
          </Text>
          <View style={{
            height: 94,
            backgroundColor: '#F9FAFB',
            marginHorizontal: 15,
            justifyContent: 'center',
            alignItems: 'center',
            paddingHorizontal: 70,
          }}
          >
            <Text
              style={{
                textAlign: 'center',
                alignItems: 'center',
                color: '#666',
                fontSize: 14,
                lineHeight: 19,
              }}

            >
              您的保单已经发送到邮箱:
              1211447311@163.com,请注意查收
            </Text>
          </View>
          <Button
            title="返回"
            containerStyle={{ margin: 15, width: global.SCREEN_WIDTH - 30, height: 50 }}
            onPress={this.popToHome}
          />
        </View>
      </View>
    );
  }
}

function propsMapping(props) {
  const { nav } = props;
  return {
    routes: nav ? nav.routes : [],
  };
}

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

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