/**
 * @flow
 */
import React from 'react';
import { TouchableOpacity, View } from 'react-native';
import LinearGradient from 'react-native-linear-gradient';
import FastImage from 'react-native-fast-image';
import NavigationBar from '../../components/NavigationBar';
import Text from '../../components/Text';
import { ENV, resourceURLMapping } from '../../utils/constants';


export const headerHeight = 150;
export const tabHeight = 43;

export function renderPolicyHeader(props) {
  return (
    <LinearGradient
      start={{ x: 0.5, y: 0 }}
      end={{ x: 0.5, y: 1 }}
      locations={[0, 1]}
      colors={['#08BFF9', '#4A98E0']}
      style={[{
        height: headerHeight - tabHeight,
        justifyContent: 'flex-end',
      }]}
    >
      <View
        style={{
          height: 25,
          flexDirection: 'row',
          marginBottom: 62,
          paddingLeft: 15,
        }}
      >
        <Text style={{
          color: '#fff',
          fontSize: 18,
        }}
        >
          太平保险
        </Text >
        <Text
          style={{
            color: '#fff',
            fontSize: 12,
            marginTop: 6,
            marginLeft: 2,
          }}
        >
          为您精选
        </Text >
      </View >
    </LinearGradient >
  );
}

export function renderPolicyTab(props) {
  return (
    <View
      style={{
        height: tabHeight * 2,
        backgroundColor: '#fff',
        borderRadius: 10,
        position: 'absolute',
        zIndex: 3,
        top: headerHeight - tabHeight - tabHeight,
        left: 15,
        right: 15,
        bottom: global.SCREEN_HEIGHT - headerHeight,
        elevation: 20,
        shadowOffset: { width: 0, height: 0 },
        shadowColor: '#D0DBFF',
        shadowOpacity: 1,
        shadowRadius: 5,
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
      }}
    >
      <TouchableOpacity
        style={{
          flex: 1,
          height: tabHeight * 2,
        }}
        onPress={() => props.pushTo('InsuranceList')}
      >
        <View style={{
          flex: 1,
          height: tabHeight * 2,
          flexDirection: 'row',
          justifyContent: 'center',
          alignItems: 'center',
        }}
        >
          <FastImage
            style={{
              width: 36,
              height: 36,

            }}
            source={{
              uri: `${resourceURLMapping[ENV]}insure_wodebaodan.png`,
              priority: FastImage.priority.normal,
            }}
            resizeMode={FastImage.resizeMode.stretch}
          />
          <Text style={{ color: '#333', fontSize: 16, marginLeft: 10 }} >我的保单</Text >

        </View >
      </TouchableOpacity >
      <View style={{ backgroundColor: '#ccc', height: tabHeight, width: 1 }} />
      <View style={{
        flex: 1,
        height: tabHeight * 2,
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
      }}
      >
        <FastImage
          style={{
            width: 36,
            height: 36,
          }}
          source={{
            uri: `${resourceURLMapping[ENV]}insure_wodedingdan.png`,
            priority: FastImage.priority.normal,
          }}
          resizeMode={FastImage.resizeMode.stretch}
        />
        <Text style={{ color: '#333', fontSize: 16, marginLeft: 10 }} >我的订单</Text >
      </View >
    </View >
  );
}

export default {
  renderPolicyTab,
  renderPolicyHeader,
  headerHeight,
  tabHeight,
};
