import React, { Component } from "react";
import {
  Platform,
  StyleSheet,
  Text,
  View,
  Image,
  TouchableOpacity,
  ImageBackground,
  Button,
  Dimensions,
  DeviceEventEmitter
} from "react-native";

/** 因没有图，所以Image先用颜色代替，有图可替换 */
const instructions = Platform.select({
  ios: "Press Cmd+R to reload,\n" + "Cmd+D or shake for dev menu",
  android:
    "Double tap R on your keyboard to reload,\n" +
    "Shake or press menu button for dev menu"
});

type Props = {};
var width = Dimensions.get("window").width;
var height = Dimensions.get("window").height;
export default class Header extends Component<Props> {
  render() {
    return (
      <TouchableOpacity activeOpacity={1} onPress={this.props.onPress}>
        <View
          style={{
            width: this.props.width,
            height: this.props.height,
            flexDirection: "column"
          }}
        >
          <View style={{ flex: 1 }} />
          <View
            style={{
              flex: 1,
              alignItems: "center",
              justifyContent: "center",
              flexDirection: "row"
            }}
          >
            <Image
              source={{
                uri: this.props.uri
              }}
              style={{
                width: 60,
                height: 60,
                borderRadius: 50
              }}
            />
            <View
              style={{
                flex: 0.1
              }}
            />
            <View
              style={{
                flex: 10,
                width: "100%",
                height: "100%",
                flexDirection: "column"
              }}
            >
              <Text
                style={{
                  width: "100%",
                  height: "50%",
                  fontSize: 18,
                  fontWeight: "bold",
                  textAlign: "left",
                  textAlignVertical: "bottom"
                }}
              >
                {this.props.username}
              </Text>
              <View
                style={{
                  flex: 2,
                  flexDirection: "row"
                }}
              >
                <Image
                  // source={{
                  //   uri: this.props.uri
                  // }}
                  style={{
                    alignItems: "center",
                    justifyContent: "center",
                    width: 20,
                    height: 20,
                    backgroundColor: "blue"
                  }}
                />
                <Text
                  style={{
                    flex: 1,
                    textAlignVertical: "center",
                    marginLeft: 2
                  }}
                >
                  {this.props.flowerNumber}
                </Text>
              </View>
            </View>
          </View>
          <View style={{ flex: 1 }} />
        </View>
      </TouchableOpacity>
    );
  }
}
/**

      使用方法
      <Header
          uri="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1295208965,3056573814&amp;fm=26&amp;gp=0.jpg"
          width={400}
          height={150}
          username="卡通笨笨熊"
          flowerNumber="123234"
          onPress={() => this.toNextPage("MainActivity")}
        />


 */