// @flow
import React from 'react';
import { TouchableOpacity, View } from 'react-native';
import Text from '../../components/Text';
import LinearGradient from 'react-native-linear-gradient';
import BasicIcon from '../../components/BasicIcon';

export default function renderListItem(props) {
  const {
    section, row, titleHeight, item, onPress, itemHeight,
  } = props;
  return (
    <View
      key={`${section}-${row}`}
      style={{
        alignItems: 'stretch',
        paddingHorizontal: 15,
        paddingTop: 12,
      }}
    >
      <View style={{
        flexDirection: 'row',
        backgroundColor: '#FFFFFF',
        borderRadius: 10,
        height: titleHeight,
      }}
      >
        <View
          style={{
            flex: 2,
            justifyContent: 'space-around',
            paddingLeft: 15,
          }}
        >
          <View style={{
            flexDirection: 'row',
          }}
          >
            <LinearGradient
              start={{ x: 0.0, y: 0.25 }}
              end={{ x: 0.5, y: 1.0 }}
              locations={[0, 1]}
              colors={[item.companyColor[1], item.companyColor[0]]}
              style={{
                width: 60, height: 18, alignItems: 'center', justifyContent: 'center',
              }}
            >
              <Text style={{ color: '#fff', fontSize: 12 }}>
                {item.company}
              </Text>
            </LinearGradient>
            <Text style={{
              color: '#666',
              fontSize: 14,
              marginLeft: 12,
            }}
            >
              {item.policyNo}
            </Text>
          </View>
          <Text style={{
            color: '#333',
            fontSize: 18,
          }}
          >
            {item.productName}
          </Text>
        </View>
        <TouchableOpacity
          style={{
            flex: 1,
            alignItems: 'flex-end',
            justifyContent: 'center',
            paddingRight: 15,
          }}
          onPress={onPress}
        >
          <BasicIcon suite="Ionicons" name="ios-arrow-forward" size={26} color="#666" />
        </TouchableOpacity>
      </View>
      <View style={{
        flexDirection: 'row',
        height: itemHeight - 12 - titleHeight,
        padding: 15,
        backgroundColor: '#fff',
      }}
      >
        <View
          style={{
            justifyContent: 'space-between',
          }}
        >
          <Text
            style={{
              color: '#999',
              fontSize: 12,
            }}
          >
            被保险人
          </Text>
          <Text
            style={{
              color: '#333',
              fontSize: 14,
            }}
          >
            {item.applicant}
          </Text>
        </View>
        <View
          style={{
            justifyContent: 'space-between',
            flex: 1,
            marginHorizontal: 19,
          }}
        >
          <Text
            style={{
              color: '#999',
              fontSize: 12,
            }}
          >
            保险期间
          </Text>
          <Text
            style={{
              color: '#333',
              fontSize: 14,
            }}
          >
            {item.duration}
          </Text>
        </View>
        <View
          style={{
            justifyContent: 'space-between',
          }}
        >
          <Text
            style={{
              color: '#999',
              fontSize: 12,
            }}
          >
            保单状态
          </Text>
          <Text
            style={{
              color: '#0E6DCF',
              fontSize: 14,
            }}
          >
            {item.status}
          </Text>
        </View>
      </View>
    </View>
  );
}
