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

import React, { useState, useEffect } from 'react';
import { TouchableOpacity, View, ScrollView } from 'react-native';
import { connect } from 'react-redux';
import { compose } from 'redux';
import FastImage from 'react-native-fast-image';
import Text from '../../components/Text';
import InsuranceDetailPanel from './InsuranceDetailPanel';
import Styles from '../../theme/Styles';
import NavigationBar from '../../components/NavigationBar';
import BackButton from '../../components/BackButton';
import { push, tab } from '../../BasicNavigator/actions';
import { ENV, resourceURLMapping } from '../../utils/constants';


function renderInsuranceDetail(props) {
  const { params } = props.navigation.state;


  const [value, setValue] = useState([
    {
      title: '险种信息',
      content: [
        {
          key: '险种名称',
          value: params.productName,
        },
        {
          key: '险种当前状态',
          value: params.productStatus,
        },
        {
          key: '保额',
          value: params.amount,
        },
        {
          key: '生效日期',
          value: params.date,
        },
        {
          key: '被保人',
          value: params.insured,
        },
        {
          key: '保费',
          value: params.premium,
        },
        {
          key: '下期缴费日',
          value: params.nextDate,
        },
      ],
    },
    {
      title: '投保人',
      content: [
        {
          key: '姓名',
          value: params.applicant,
        },
        {
          key: '生日',
          value: params.birthday,
        },
        {
          key: '性别',
          value: params.gender,
        },
        {
          key: '证件号',
          value: params.idno,
        },
        {
          key: '手机号',
          value: params.mobile,
        },
      ],
    }]);
  const renderItem = (item, index) => (
    <InsuranceDetailPanel
      key={`LoanPanl-${index}`}
      item={item}
      index={index}
    />
  );
  const uri = `${resourceURLMapping[ENV]}${
    params.company === '太平人寿' ? 'bg_bdxq_rs.png' : 'bg_bdxq_cx.png'}`
  console.log('uri:',uri)
  return (
    <View style={[Styles.container, { backgroundColor: '#F4F5F5' }]}>
      <NavigationBar
        style={{ backgroundColor: '#fff' }}
        textStyle={{
          color: '#333',
          fontSize: 17,
          fontWeight: '400',
        }}
        left={<BackButton style={{ color: '#333' }} />}
        title="保单详情"
      />
      <ScrollView
        style={{ flex: 1, backgroundColor: '#F4F5F5' }}
      >
        <View
          style={{
            height: global.SCREEN_WIDTH * 105 / 375,
          }}
        >
          <FastImage
            style={{ width: global.SCREEN_WIDTH, height: global.SCREEN_WIDTH * 105 / 375 }}
            source={{
              uri,
              priority: FastImage.priority.normal,
            }}
            resizeMode={FastImage.resizeMode.stretch}
          />
          <View
            style={{
              height: global.SCREEN_WIDTH * 105 / 375,
              position: 'absolute',
              top: 0,
              bottom: 0,
              left: 0,
              right: 0,
              paddingLeft: 30,
              justifyContent: 'flex-end',
            }}
          >
            <Text
              style={{
                fontSize: 12,
                color: '#fff',
                marginBottom: global.SCREEN_WIDTH * 4 / 375,
              }}
            >
              保单号
            </Text>
            <Text
              style={{
                fontSize: 18,
                color: '#fff',
                weight: 400,
                marginBottom: global.SCREEN_WIDTH * 21 / 375,
              }}
            >
              {params.policyNo}
            </Text>
          </View>
        </View>
        {
          value.map((item, index) => (
            renderItem(item, index)
          ))
        }
      </ScrollView>
    </View>
  );
}
function propsMapping(props) {
  const { nav, theme } = props;
  return {
    nav,
    theme,
  };
}

function actionMapping(dispatch) {
  return {
    pushTo: compose(dispatch, push),
    tabTo: compose(dispatch, tab),
  };
}
export default connect(propsMapping, actionMapping)(renderInsuranceDetail);
