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

import React, { Component } from 'react';
import {
  View,
} from 'react-native';
import { SpringScrollView } from 'react-native-spring-scrollview';
import { CommonLottieHeader } from 'react-native-spring-scrollview/Customize/CommonLottieHeader';


import Picker from '../../components/Picker';
import Styles from '../../theme/Styles';
import { trailPolicyAPI } from '../InsuranceList/InsuranceAPI';

import {
  BANNER,
  PROCESS,
  PAGE_TITLE,
  BUTTON_GROUP,
  LIST_ITEM,
  CELL,
  CHECKBOX,
  PICKER,
  DATE_PICKER,
  IMAGE,
  TAB,
  MULTINPUT,
  TEXTAREA,
  PRODUCT_TITLE,
  PRODUCT_BANNER,
  PLAN_INFO,
  PREM_GROUP,
  PRODUCT_IMAGE,
  SERVICE_IMAGE,
  NOTICE_IMAGE,
  INSURE_YEAR,
  MULT,
  JIACHENG,
  AIFEIXIANG,
  XUESHENGYIWAI,
} from './config/keys';
import {
  getConfig,
} from './config';
import { renderPageByConfig } from '.';
import Button from '../../components/ThemeButton';
import SubmitButton from './components/SubmitButton';

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

const pageName = 'productDetail';
class BaseContainer extends Component {
  constructor(props : Props) {
    super(props);
    console.log('props', props);
    const productDetail = getConfig(props.blueId)[props.pageName];
    const { params } = props;
    const { keys, layout } = productDetail;
    this.productDetail = productDetail;
    this.policy = {
      mult: '',
      prem: 99,
      premTotal: 99,
    };
    this.state = {
      params,
      config: {},
      keys,
    };

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

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


  fillData = (key, lay, params) => {
    const {
      name, description, tagNameList, bannerIconUrl, guaranteeContent,
      productIntroductionUrl, serviceProcessUrl,
    } = params.detail;
    console.log('productIntroductionUrl', productIntroductionUrl);
    switch (key) {
    case PRODUCT_BANNER:
      return {
        uri: bannerIconUrl.url,
        width: global.SCREEN_WIDTH,
        height: global.SCREEN_WIDTH * bannerIconUrl.height / bannerIconUrl.width,
      };
    case PREM_GROUP:
      return {
        onSelect: (index) => {
          console.log('BUTTON_GROUP,onSelect', index);
          switch (index) {
          case 0:
            this.policy.prem = 99;
            break;
          case 1:
            this.policy.prem = 199;
            break;
          default:
            break;
          }
        },
        selectIndex: 0,
      };
    case PRODUCT_TITLE:
      return {
        h1: name, // title需要装填数据 主标题
        h2: description, // title需要装填数据 副标题
        label: tagNameList, // 多个展示标签
        labelColor: '#cf4100', //颜色
      };
    case PLAN_INFO:
      return {
        label: {
          icon: '', //左侧icon
          h1: '保障计划', //主标题
          rightIcon: '', //右侧icon
          rightText: '查看保障详情', //右侧文字
          onPress: () => {
          }, //点击事件
        },
        data: JSON.parse(guaranteeContent),
      };
    case INSURE_YEAR:
      return {};
    case MULT:
      return {
        onChangeText: (value) => {
          console.log('ProductDetailPage_onChangeText', value);
          this.policy.mult = value;
          console.log(this.policy.mult);
        },
        onEndEditing: () => {
        },
        value: this.state.mult,
      };
    case NOTICE_IMAGE:
      return {};
    case PRODUCT_IMAGE:
      return {
        uri: productIntroductionUrl.url,
        width: global.SCREEN_WIDTH,
        height: global.SCREEN_WIDTH * productIntroductionUrl.height / productIntroductionUrl.width,
        label: {
          icon: '', //左侧icon
          h1: '特色产品', //主标题
          rightIcon: '', //右侧icon
          rightText: '', //右侧文字
          onPress: () => {
          }, //点击事件
        },
      };
    case SERVICE_IMAGE:
      return {
        uri: serviceProcessUrl.url,
        width: global.SCREEN_WIDTH,
        height: global.SCREEN_WIDTH * serviceProcessUrl.height / serviceProcessUrl.width,
        label: {
          icon: '', //左侧icon
          h1: '理赔流程', //主标题
          rightIcon: '', //右侧icon
          rightText: '', //右侧文字
          onPress: () => {
          }, //点击事件
        },
      };
    default:
      return {};
    }
  }

  translateDataToRules = (key, rule, params) => {
    switch (key) {
    case BANNER:
      return {};
    case PAGE_TITLE:
      return {};
    case LIST_ITEM:
      return {};
    case PICKER:
      return {};
    default:
      return {};
    }
  }

  renderExtraViews = (viewType) => {
    switch (viewType) {
    case PICKER:
      return this.renderPicker;
    case 'submit':
      return this.renderSubmit;
    default:
      return () => {};
    }
  }


  renderSubmit = () => (
    <SubmitButton />
  )

  renderPicker = (data) => {
    console.log('renderPicker:', data);
    return (
      <Picker {...data} />
    );
  }

  renderInsureViews = (config, key, type) => {
    renderPageByConfig(
      config[key][type], this.renderExtraViews,
    )(config[key]); // 第二个参数可以传入自己的方法根据自定义类型渲染组件
  }

  render() {
    const { config, keys } = this.state;
    console.log('config:', config, keys);
    const type = 'type';
    return (
      <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}
        //loadingFooter={CommonLottieFooter}
      >
        <View>
          {keys.map((key, index) => (
            this.renderInsureViews(config, key, type)
          ))}
        </View>
      </SpringScrollView>
    );
  }
}
export default BaseContainer;
