import React, {Component} from 'react';
import {
  View,
  Text,
  StyleSheet,
  Dimensions,
  TouchableOpacity,
  Platform,
} from 'react-native';
import PropTypes from 'prop-types';
import history from '../common/history';
import {colors} from '../assets/styles/colors-theme';
import {Fonts} from '../assets/styles/fonts-theme';
import Icon from 'react-native-vector-icons/FontAwesome5';
import {inject, observer} from 'mobx-react';
import {observable} from 'mobx';
const {width} = Dimensions.get('window');

@inject('appStore')
@observer
export default class NaviBar extends Component {
  static propTypes = {
    style: PropTypes.object,
    leftItem: PropTypes.node, //原则上控制在宽度40的icon
    rightItem: PropTypes.node, //原则上控制在宽度40的icon
    title: PropTypes.string,
    titleColor: PropTypes.string,
    onBack: PropTypes.func,
    iconColor: PropTypes.string,
  };

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

  renderCircle() {
    if (this.store.helperUnRead > 0) {
      return (
        <Icon
          name={'circle'}
          solid
          size={10}
          style={{position: 'absolute', top: 0, right: 10}}
          color={'red'}
        />
      );
    }
  }

  render() {
    const props = this.props;

    return (
      <View style={[styles.naviBar, props.style]}>
        {/* <View style={{width: 40}}>
         <Text> Helper</Text>
        </View>
        <Text style={{color: props.titleColor || '#fff'}}>{props.title}</Text>
        <View style={{width: 40}}>
         <Icon name={'comment'}solid/>
        </View> */}
        <View style={[styles.barAreaView, {alignItems: 'flex-start'}]}>
          {/* <TouchableOpacity
            onPress={() => {
              history.push(this.props.self, '/helpSelect');
            }}>
      
            <Icon
              name={'bars'}
              solid
              size={32}
              style={{marginLeft: 20}}
              color={'white'}
            />
          </TouchableOpacity> */}
        </View>
        <View style={{alignItems: 'center', justifyContent: 'center'}}>
          <Text
            style={{fontFamily: Fonts.ubuntu, color: 'white', fontSize: 20}}>
            Rent Chat
          </Text>
        </View>

        <TouchableOpacity
          style={[styles.barAreaView, {alignItems: 'flex-end'}]}
          onPress={() => this.props.onPress && this.props.onPress()}>
          <View
            style={{
              alignItems: 'center',
              justifyContent: 'center',
              marginRight: 20,
            }}>
            <Icon name={'headset'} solid size={32} color={'white'} />
            {/* <Icon
              name={'headset'}
              solid
              size={15}
              style={{position: 'absolute'}}
              color={colors.mainColor}
            /> */}
          </View>
          {this.renderCircle()}
        </TouchableOpacity>
      </View>
    );
  }
}

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