/**
 * 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,
} 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';


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


function dateView(props) {
  return (
    <View style={{ flexDirection: 'row', paddingLeft: 10, alignItems: 'center'}}>
      <BasicIcon suite="Ionicons" name="ios-calendar" size={16} color="#666" />
      <Text style={{
        color: '#666',
        fontSize: 14,
        paddingLeft: 10,
      }}
      >
        {props.value}
      </Text>
    </View>
  );
}

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

    this.policy = props.navigation.state.params.policy;
    const { fillInfo } = getConfig(this.policy.blueId);
    console.log('FillPolicyInfoPage_fillInfo', fillInfo);
    const { keys, layout } = fillInfo;
    this.fillInfo = fillInfo;
    this.state = {
      params: {
        user: localData.user,
      },
      config: {},
      keys,
    };

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

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

  fillData = (key, lay, params) => {
    const User = params.user;
    switch (key) {
    case APPLICANT_NAME:
    case INSURED_NAME:
      return {
        value: User.name,
      };
    case APPLICANT_ID_TYPE:
    case INSURED_ID_TYPE:
      return {
        value: User.idType,
      };
    case APPLICANT_ID:
      return {
        value: User.idNo,
      };
    case APPLICANT_GENDER:
      return {
        value: User.gender,
      };
    case APPLICANT_BIRTHDAY:
      return {
        value: User.birthday,
      };
    case APPLICANT_MOBILE:
      return {
        value: User.mobile,
      };
    case APPLICANT_EMAIL:
      return {
        value: '-',
      };
    default:
      return {};
    }
  }

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


  renderPicker = (data) => {
    console.log('renderPicker:', data);
    return (
      <View>
        <Picker
          {...data}
          picker={DatePicker}
          value="请选择启始时间"
          afterValue={dateView({ value: '0时止' })}
        />
        <Picker
          style={{
            margin: 0,
          }}
          {...data}
          text=""
          value="请选择结束时间"
          picker={DatePicker}
          beforeValue={(
            <View style={{justifyContent: 'center'}}>
            <Text style={{
              marginRight: 10,
              color: '#666',
              fontSize: 14,
            }}
            >
              至
            </Text>
            </View>
          )}
          afterValue={dateView({ value: '24时止' })}
        />
      </View>
    );
  }

  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], (viewType) => {
                switch (viewType) {
                case DATE_RANGE:
                  return this.renderPicker;
                default:
                  return () => {};
                }
              })(config[key]) // 第二个参数可以传入自己的switch 方法根据自定义类型渲染组件
            ))}
          </View>
          <Button
            title="下一步"
            containerStyle={{ margin: 15 }}
            onPress={() => pushTo('PaymentPage', { policy: this.policy })}
          />
        </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)(FillPolicyInfoPage);
