/**
 * @flow
 */
import React from 'react';
import { View, Platform } from 'react-native';
import FastImage from 'react-native-fast-image';
import Text from '../Text';
import { ENV, resourceURLMapping } from '../../utils/constants';
import BasicIcon from '../BasicIcon';
import { iosMarginTop, androidTop } from '../NavigationBar';


export function HomeHeader(props) {
  return (
    <View style={{
      flexDirection: 'row',
      alignItems: 'center',
      height: 44,
      width: global.SCREEN_WIDTH,
      marginTop: Platform.OS === 'ios' ? iosMarginTop : androidTop,
    }}
    >
      <FastImage
        style={{
          width: 78,
          height: 30,
          marginLeft: 10,
        }}
        source={{
          uri: `${resourceURLMapping[ENV]}logo_login_taiping.png`,
          priority: FastImage.priority.normal,
        }}
        resizeMode={FastImage.resizeMode.stretch}
      />
      <View
        style={{
          flex: 1,
          height: 32,
          borderRadius: 16,
          marginHorizontal: 10,
          backgroundColor: '#ECECF0',
          justifyContent: 'center',
          alignItems: 'center',
        }}
      >
        <Text
          style={{
            color: '#8CA0BA',
            fontSize: 14,
          }}
        >
          {'搜索"保险服务"'}
        </Text>
      </View>
      <View style={{
        flexDirection: 'row',
        justifyContent: 'flex-end',
        marginRight: 10,
      }}
      >
        <FastImage
          style={{
            width: 24,
            height: 24,
            marginRight: 10,
          }}
          source={{
            uri: `${resourceURLMapping[ENV]}icon_message77.png`,
            priority: FastImage.priority.normal,
          }}
          resizeMode={FastImage.resizeMode.stretch}
        />
      </View>
    </View>
  );
}

export function UserPageHeader(props) {
  return (
    <View style={{
      flexDirection: 'row',
      alignItems: 'center',
      height: 44,
      width: global.SCREEN_WIDTH,
      marginTop: Platform.OS === 'ios' ? iosMarginTop : androidTop,
    }}
    >
      <FastImage
        style={{
          width: 36,
          height: 36,
          marginHorizontal: 15,
          borderRadius: 18,
        }}
        source={{
          uri: `${resourceURLMapping[ENV]}icon_avatar_default.png`,
          priority: FastImage.priority.normal,
        }}
        resizeMode={FastImage.resizeMode.stretch}
      />
      <View
        style={{
          flex: 1,
          height: 36,
          flexDirection: 'column',
          alignItems: 'flex-start',
        }}
      >
        <Text
          style={{
            color: '#333',
            fontSize: 14,
          }}
        >
          { props.phone }
        </Text>
        <View
          style={{
            flex: 1,
            height: 18,
            flexDirection: 'row',
            alignItems: 'stretch',
          }}
        >
          <FastImage
            style={{
              width: 68,
              height: 16,
            }}
            source={{
              uri: `${resourceURLMapping[ENV]}pic_user_dazhong_vip.png`,
              priority: FastImage.priority.normal,
            }}
            resizeMode={FastImage.resizeMode.stretch}
          />
          <View style={{ width: 10 }} />
          <BasicIcon suite="Foundation" name="laptop" size={16} color={props.color} />
          <View style={{ width: 10 }} />
          <BasicIcon suite="Ionicons" name="ios-happy" size={16} color={props.color} />
        </View>
      </View>
      <View style={{
        flexDirection: 'row',
        justifyContent: 'flex-end',
        marginRight: 10,
      }}
      >
        <FastImage
          style={{
            width: 24,
            height: 24,
            marginRight: 15,
          }}
          source={{
            uri: `${resourceURLMapping[ENV]}icon_message77.png`,
            priority: FastImage.priority.normal,
          }}
          resizeMode={FastImage.resizeMode.stretch}
        />
        <BasicIcon suite="Foundation" name="widget" size={24} color="#606273" />
      </View>
    </View>
  );
}

export default {
  HomeHeader,
  UserPageHeader,
};
