/**
 * 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 } from '../../BasicNavigator/actions';
import NavigationBar, { NavHeight } from '../../components/NavigationBar';
import BackButton from '../../components/BackButton';
import Styles from '../../theme/Styles';
import decorator from '../../utils/decorator';
import Text from '../../components/Text'
import {
  BANNER, CHOOSE, BaseConfig, LIST_ITEM, TITLE, PRODUCT, SERVICE,
} from '../Agera-App-Insure/config';
import { renderPageByConfig } from '../Agera-App-Insure';
import Button from '../../components/ThemeButton';

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

@decorator
class ProductDetailPage extends Component {
  constructor(props:Props) {
    super(props);
    /*    {
      blueId: '200000156',
        company: 'PROPERTY',
      iconUrl: 'https://ecustomer.tp95589.com/static/insurance_img/201906/03/1babf50701374e79b2d0e1758d7e6d42.png',
      detail: {
      name: '“驾乘至尊宝”驾乘人员人身意外综合保险',
        description: '不限被保险人、最高50万保障',
        detailsPageWxshareUrl: '',
        guaranteeContent: '[{"text":[{"name":"驾乘意外身故、残疾","value":"25万元/份"},{"name":"驾乘意外伤害医疗","value":"1万元/份"}]},{"text":[{"name":"驾乘意外身故、残疾","value":"50万元/份"},{"name":"驾乘意外伤害医疗","value":"3万元/份"}]}]',
        bannerIconUrl: 'https://ecustomer.tp95589.com/static/insurance_img/201901/01/dbf8648cdca04b20af889f07e3938b5f.png',
        productIntroductionUrl: 'https://ecustomer.tp95589.com/static/insurance_img/201906/11/1755eb7f49934157b6fc65f09ef9015a.png',
        serviceProcessUrl: 'https://ecustomer.tp95589.com/static/insurance_img/201906/11/2c0eb0145bf1498bb677897a8b03b179.png',
        importantNotificationUrl: '',
        tagNameList: [
        '1-75周岁',
      ],
    },
    }*/
    const pageConfig = BaseConfig[props.navigation.state.params.blueId];
    const { params } = props.navigation.state;
    pageConfig.layout.forEach((lay, index) => {
      console.log(lay);
      const data = this.translateDataToConfig(lay, params);
      pageConfig.layout[index] = { ...lay, ...data };
    });

    this.state = {
      params,
      config: pageConfig,
    };

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

  translateDataToConfig = (lay, params) => {
    const {
      name, description, tagNameList, bannerIconUrl, guaranteeContent,
      productIntroductionUrl, serviceProcessUrl } = params.detail;
    console.log('guaranteeContent',guaranteeContent)
    switch (lay.type) {
    case BANNER:
      return {
        uri: bannerIconUrl,
        width: global.SCREEN_WIDTH,
        height: global.SCREEN_WIDTH * 180 / 375,
      };
    case TITLE:
      return {
        h1: name, // title需要装填数据 主标题
        h2: description, // title需要装填数据 副标题
        label: tagNameList, // 多个展示标签
        labelColor: '#cf4100', //颜色
      };
    case LIST_ITEM:
      return {
        title: {
          icon: '', //左侧icon
          h1: '', //主标题
          rightIcon: '', //右侧icon
          rightText: '', //右侧文字
          onPress: () => {}, //点击事件
        },
        data: JSON.parse(guaranteeContent),
      };
    case CHOOSE:
      return {};
      case PRODUCT:
        return {
          uri: productIntroductionUrl,
          width: global.SCREEN_WIDTH,
        };
      case SERVICE:
        return {
          uri: serviceProcessUrl,
          width: global.SCREEN_WIDTH,
        };
    default:
      return {};
    }
  }

  translateDataToRules = (lay, rul, params) => {
    switch (lay.type) {
    case BANNER:
      return {};
    case TITLE:
      return {};
    case LIST_ITEM:
      return {};
    case CHOOSE:
      return {};
    default:
      return {};
    }
  }

  render() {
    const { config } = this.state;
    return (
      <View style={Styles.container}>
        <NavigationBar
          left={<BackButton />}
          title="太平保险"
        />
        <SpringScrollView
          ref={com => (this.scrollView = com)}
          styles={Styles.container}
          inverted={false}
          //onRefresh={this._onRefresh}
          //onLoading={this._onLoading}
          // allLoaded={this.state.allLoaded}
          refreshHeader={CommonLottieHeader}
          //loadingFooter={CommonLottieFooter}
        >
          {config.layout.map((lay, index) => (
            renderPageByConfig(lay)(lay)
          ))}
          <View style={{flexDirection:'row',height:44,alignItems: 'stretch'}}>
            <View style={{width:global.SCREEN_WIDTH * 150 / 375,justifyContent:'center',alignItems:'center',}}>
              <Text style={{color:'#666', fontSize: 16}}>
                金额
                <Text style={{color:'#FF4656'}}> 125</Text>
              </Text>
            </View>
            <Button
              title="立即投保"
              containerStyle={{ width:global.SCREEN_WIDTH * 225 /375 }}
            />
          </View>
        </SpringScrollView>
      </View>

    );
  }
}

function propsMapping(props) {
  const { nav } = props;
  return {
    routes: nav ? nav.routes : [],
  };
}
function actionMapping(dispatch) {
  return {
    popTo: compose(dispatch, pop),
  };
}

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