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

import React, { Component } from 'react';
import {
  View,
} from 'react-native';
import { compose } from 'redux';
import { connect } from 'react-redux';
import { SpringScrollView } from 'react-native-spring-scrollview';
import { CommonLottieHeader } from 'react-native-spring-scrollview/Customize/CommonLottieHeader';
import { pop, push } from '../../BasicNavigator/actions';
import NavigationBar, { NavHeight } from '../../components/NavigationBar';
import BackButton from '../../components/BackButton';
import Picker from '../../components/Picker';
import Styles from '../../theme/Styles';
import decorator from '../../utils/decorator';
import DatePicker from '../../components/Agera-App-Base-Pickers/DatePicker';
import BasicIcon from '../../components/BasicIcon';
import Text from '../../components/Text';
import {
  APPLICANT_NAME,
  APPLICANT_ID_TYPE,
  APPLICANT_ID,
  APPLICANT_BIRTHDAY,
  APPLICANT_GENDER,
  APPLICANT_MOBILE,
  APPLICANT_EMAIL,
  INSURED_TITLE,
  INSURED_NAME,
  INSURED_ID_TYPE,
  INSURE_YEAR_TITLE,
  PICKER,
  DATE_RANGE,
  INSURED_PREM,
  INSURED_PRODUCT,
  POLICY_PROGRESS,
  PAYMENT_TYPE,
} from '../Agera-App-Insure/config/keys';
import {
  getConfig,
} from '../Agera-App-Insure/config';
import { renderPageByConfig } from '../Agera-App-Insure';
import Button from '../../components/ThemeButton';
import SubmitButton from '../Agera-App-Insure/components/SubmitButton';
import BaseContainer from '../Agera-App-Insure/BaseContainer';
import localData from '../../utils/api/localData';
import ListItem from '../Agera-App-Insure/components/ListItem';
import { ENV, resourceURLMapping } from "../../utils/constants";


type Props = {
  routes : Array,
  popTo : () => void,
  pushTo : () => void,
  blueId : string,
};


@decorator
class PaymentPage extends Component {
  constructor(props : Props) {
    super(props);

    this.policy = props.navigation.state.params.policy;
    const { payment } = getConfig(this.policy.blueId);
    console.log('paymentPage_payment', payment);
    const { keys, layout } = payment;
    this.payment = payment;
    this.state = {
      params: {
        payment: {
          prem: this.policy.premTotal,
          name: this.policy.productName,
        },
      },
      config: {},
      keys,
    };

    console.log('paymentPage', this.state);
  }

  componentWillMount() : void {
    const config = {};
    const { params } = this.state;
    const { keys, layout } = this.payment;
    keys.forEach((key) => {
      const data = this.fillData(key, this.payment[key], params);
      console.log('paymentPage:', this.payment, layout[key], key);
      config[key] = { ...layout[key], ...data };
    });
    this.setState({
      config,
    });
  }

  fillData = (key, lay, params) => {
    const Payment = params.payment;
    switch (key) {
    case POLICY_PROGRESS:
      return {
        index: 1,
      };
    case INSURED_PRODUCT:
      return {
        value: Payment.name,
      };
    case INSURED_PREM:
      return {
        value: Payment.prem,
      };
    case PAYMENT_TYPE:
      return {
        data: [{
          title: '微信支付',
          detail: '支持微信账号支付',
          imgUrl: `${resourceURLMapping[ENV]}wxpay.png`,
        },
          {
            title: '支付宝',
            detail: '支持支付宝支付',
            imgUrl: `${resourceURLMapping[ENV]}alipay.jpeg`,
          }], //选项
        onSelect: () => {},
        selectIndex: -1,
      };
    default:
      return {};
    }
  }

  translateDataToRules = (key, rul, params) => ({})


  render() {
    const { config, keys } = this.state;
    const { pushTo } = this.props;
    console.log('config:', config, keys);
    const type = 'type';
    return (
      <View style={Styles.container}>
        <NavigationBar
          left={<BackButton />}
          title="太平保险"
        />
        <SpringScrollView
          ref={(com) => {
            this.scrollView = 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}
        >
          <View>
            {keys.map((key, index) => (
              renderPageByConfig(config[key][type])(config[key]) // 第二个参数可以传入自己的switch 方法根据自定义类型渲染组件
            ))}
          </View>
          <Button
            title="确认支付"
            containerStyle={{ margin: 15 }}
            onPress={() => {pushTo('PolicyResultPage')}}
          />
        </SpringScrollView>
      </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)(PaymentPage);
