import React, { Component } from 'react';
import {
  View,
  Text,
  StyleSheet,
  Dimensions,
  TouchableOpacity,
  Platform,
  Image,
} from 'react-native';
import { colors } from '../assets/styles/colors-theme';
import Icon from 'react-native-vector-icons/dist/MaterialCommunityIcons';
import { inject, observer } from "mobx-react"
import { observable, makeObservable } from 'mobx'
import { getStatusBarHeight } from 'react-native-status-bar-height';
const { width } = Dimensions.get('window');
Icon.loadFont();

const TitleBar = inject("appStore")(observer(class TitleBar extends React.Component {

  constructor(props) {
    super(props);
    this.store = props.appStore;
  }

  render() {
    return (
      <View style={styles.naviBar}>
        <View style={[styles.barAreaView]}>
          <TouchableOpacity style={{ flex: 0.2, }} onPress={() => this.props.self.props.navigation.navigate('Main')}>
            <Image source={require('../assets/images/hosunsinlogo.png')} />
          </TouchableOpacity>
          {this.props.showSearch ? (
            <TouchableOpacity
              onPress={() =>
                this.props.self.props.navigation.navigate('Search')
              }
              style={{
                flexDirection: 'row',

                justifyContent: 'center',
                marginLeft: 10,
                marginTop: 5,
                flex: 0.6,
              }}>
              <Image source={require('../assets/images/search.png')} />
              <View
                style={{
                  flex: 1,
                  height: 22,
                  marginLeft: 5,
                  backgroundColor: 'white',
                  borderWidth: 1,
                  borderColor: colors.borderLineColor,
                  borderRadius: 5,
                }}></View>
            </TouchableOpacity>
          ) : (
            <View style={{ width: 170, height: 22, marginLeft: 40, marginTop: 5, }}></View>
          )}

          <TouchableOpacity
            style={{ alignItems: 'center', flex: 0.1 }}
            onPress={() =>
              this.props.self.props.navigation.navigate('ShoppingCart')
            }>
            <View style={{ justifyContent: 'center', alignItems: 'center' }}>
              <Icon name="circle" color="white" size={12} />
              <Text
                style={{
                  position: 'absolute',
                  top: 1,
                  fontSize: 7,
                  color: colors.mainColor,
                }}>
                {this.store.shoppingCartList.length}
              </Text>
            </View>
            <Image
              style={{ marginTop: -5, marginLeft: -7 }}
              source={require('../assets/images/craft.png')}
            />
          </TouchableOpacity>
        </View>
      </View>
    );
  }
}))

const styles = StyleSheet.flatten({
  naviBar: {
    width,
    height: Platform.OS === 'ios' ? 50 : 60, //ios原生导航高度是44，android是56
    backgroundColor: colors.mainColor,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    marginTop: Platform.OS === 'ios' ? 0 : getStatusBarHeight(),
  },
  barAreaView: {
    flex: 1,
    marginRight: 10,
    marginLeft: 10,
    marginTop: Platform.OS === 'ios' ? -5 : 15,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
  },
});

export default TitleBar