import React, { Component } from 'react';
import {
  View,
  Text,
  StyleSheet,
  Dimensions,
  TouchableOpacity,
  Platform,
  Image,
  Linking
} from 'react-native';
import { colors } from '../assets/styles/colors-theme';
import Icon from 'react-native-vector-icons/dist/MaterialCommunityIcons';
import Ionicons from 'react-native-vector-icons/dist/Ionicons';
import { inject, observer } from 'mobx-react';
import { observable } from 'mobx';
import { getStatusBarHeight } from 'react-native-status-bar-height';
const { width } = Dimensions.get('window');
Icon.loadFont();
Ionicons.loadFont();
@inject('appStore')
@observer
export default class TitleBar extends Component {
  constructor(props) {
    super(props);
    this.store = props.appStore;
  }

  renderShoppingGroupButton() {

    if (this.store.loginUserData == null || this.store.loginUserData.data.hasOwnProperty('shoppingGroup')) {
      return (
        <View style={{ flex: 0.1, justifyContent: 'center', alignItems: 'flex-end', height: 50, marginBottom: 10, }}>

        </View>
      )
    } else {
      return (
        <TouchableOpacity style={{ flex: 0.1, justifyContent: 'center', alignItems: 'flex-end', height: 50, marginBottom: 10, }}
          onPress={() => { this.props.self.props.navigation.navigate('GroupList') }}>
          <Icon name='account-group' size={30} color={colors.maingray} />
          <View
            style={{
              justifyContent: 'center',
              alignItems: 'center',
              position: 'absolute',
              top: 5,
              right: -5,
            }}>
            <Icon name="circle" color={colors.mainColor} size={18} />
            <Text
              style={{
                position: 'absolute',
                top: 4,
                fontSize: 8,
                color: 'white',
              }}>
              {this.store.recommendShoppingGroup.length}
            </Text>
          </View>
        </TouchableOpacity>
      )
    }
  }


  render() {
    return (
      <View style={styles.naviBar}>
        {this.props.showBack ? (
          <View style={[styles.barAreaView]}>
            <TouchableOpacity
              style={{
                flex: 0.2,
                justifyContent: 'center',
                alignItems: 'center',
              }}
              onPress={() => {
                this.props.self.props.navigation.goBack();
              }}>
              <Ionicons name="ios-arrow-back" color={'black'} size={40} />
            </TouchableOpacity>
            <View
              style={{
                flex: 0.8,
                justifyContent: 'center',
                alignItems: 'center',
              }}>
              <Text style={{ fontSize: 22, fontWeight: '800' }}>
                {this.props.title}
              </Text>
            </View>
            <View
              style={{
                flex: 0.2,
                justifyContent: 'center',
                alignItems: 'center',
              }}>
              {this.props.notification ? (<TouchableOpacity
                onPress={() => this.props.onPress && this.props.onPress()}>
                <Icon name="delete" color={colors.mainColor} size={30} />
              </TouchableOpacity>) : (<View></View>)}
            </View>
          </View>
        ) : (
            <View style={[styles.barAreaView]}>

              {this.props.showSearch ? (
                <View style={{ marginTop: 5, flex: 1, flexDirection: 'row', alignItems: 'center' }}>
                  <TouchableOpacity
                    onPress={() =>
                      this.props.self.props.navigation.navigate('Search')
                    }
                    style={{
                      flexDirection: 'row',
                      flex: 0.8,
                      justifyContent: 'center',


                    }}>
                    <View
                      style={{
                        flex: 1,
                        height: 50,
                        marginBottom: 10,
                        //marginLeft: 5,
                        backgroundColor: 'white',
                        //borderWidth: 1,
                        flexDirection: 'row',
                        borderColor: '#235335',
                        borderRadius: 12,
                        alignItems: 'center',
                        shadowColor: '#000',
                        shadowOffset: {
                          width: 0,
                          height: 1,
                        },
                        shadowOpacity: 0.22,
                        shadowRadius: 2.22,

                        elevation: 3,
                      }}>
                      <Ionicons
                        style={{ marginLeft: 10 }}
                        color="black"
                        name="md-search"
                        size={20}
                      />
                      <Text style={{ marginLeft: 10, color: colors.maingray }}>
                        {this.store.text.search}
                      </Text>
                    </View>

                  </TouchableOpacity>
                  {this.renderShoppingGroupButton()}
                  <TouchableOpacity style={{ flex: 0.1, justifyContent: 'center', alignItems: 'flex-end', height: 50, marginBottom: 10, }}
                    onPress={() => { this.props.self.props.navigation.navigate('Notification') }}>
                    <Icon name='bell' size={30} color={colors.maingray} />
                    <View
                      style={{
                        justifyContent: 'center',
                        alignItems: 'center',
                        position: 'absolute',
                        top: 5,
                        right: -5,
                      }}>
                      <Icon name="circle" color={colors.mainColor} size={18} />
                      <Text
                        style={{
                          position: 'absolute',
                          top: 4,
                          fontSize: 8,
                          color: 'white',
                        }}>
                        {this.store.notificationRecord.unread}
                      </Text>
                    </View>
                  </TouchableOpacity>
                  <TouchableOpacity style={{ flex: 0.1, justifyContent: 'center', alignItems: 'flex-end', height: 50, marginBottom: 10, }}
                    onPress={() => { Linking.openURL('http://api.whatsapp.com/send?phone=852' + '55019209') }}>
                    <Icon name='whatsapp' size={30} color={colors.maingray} />

                  </TouchableOpacity>
                </View>
              ) : (
                  <View
                    style={{
                      flex: 1,
                      justifyContent: 'center',
                      alignItems: 'center',
                    }}>
                    <Text style={{ fontSize: 22, fontWeight: '800' }}>
                      {this.props.title}
                    </Text>
                  </View>
                )}
            </View>
          )}
      </View>
    );
  }
}

const styles = StyleSheet.flatten({
  naviBar: {
    width,
    height: Platform.OS === 'ios' ? 70 : 75,
    backgroundColor: 'white',
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    marginTop: Platform.OS === 'ios' ? 0 : getStatusBarHeight(),
  },
  barAreaView: {
    flex: 1,
    marginRight: 20,
    marginLeft: 20,
    marginTop: Platform.OS === 'ios' ? -5 : 15,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
  },
});
