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 Ionicons from 'react-native-vector-icons/dist/Ionicons';
import { inject, observer } from "mobx-react"
import { observable, makeObservable } from 'mobx'
import {getStatusBarHeight} from 'react-native-status-bar-height';
import { s, vs, ms, mvs } from 'react-native-size-matters';
const {width} = Dimensions.get('window');
Icon.loadFont();
Ionicons.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, justifyContent: 'center', alignItems: 'center'}}
            onPress={() => {this.props.self.props.navigation.navigate('Main');
            if(this.props.isMain){
              this.props.self.closeCategoriesItems()
            }}}>
            <Image
              style={{marginLeft: 10}}
              source={require('../assets/images/logo.png')}
            />
          </TouchableOpacity>
          {this.props.showSearch ? (
            <TouchableOpacity
              onPress={() =>
                this.props.self.props.navigation.navigate('Search')
              }
              style={{
                flexDirection: 'row',

                justifyContent: 'center',

                marginTop: 5,
                flex: 0.6,
              }}>
              <View
                style={{
                  flex: 1,
                  height: 25,
                  marginBottom: 10,
                  //marginLeft: 5,
                  backgroundColor: '#235335',
                  //borderWidth: 1,
                  borderColor: '#235335',
                  borderRadius: 12,
                  justifyContent: 'center',
                }}>
                <Ionicons
                  style={{marginLeft: 10}}
                  color="white"
                  name="md-search"
                  size={15}
                />
              </View>
            </TouchableOpacity>
          ) : (
            <View
              style={{
                flex: 0.6,
                height: 22,
                marginLeft: 40,
                marginTop: 5,
              }}></View>
          )}

          <TouchableOpacity
            style={{
              alignItems: 'center',
              flex: 0.2,
              marginBottom: 5,
              justifyContent: 'center',
              flexDirection: 'row',
            }}
            onPress={() =>
              this.props.self.props.navigation.navigate('ShoppingCart')
            }>
            <Icon name="cart" color="white" size={25} />
            <View style={{justifyContent: 'center', alignItems: 'center',position:'absolute' ,top:s(-3),left:s(18)}}>
              <Icon name="circle" color="white" size={12} />
              <Text
                style={{
                  position: 'absolute',
                  top: 1,
                  fontSize: 7,
                  color: colors.mainColor,
                }}>
                {this.store.shoppingCartList.length}
              </Text>
            </View>
          </TouchableOpacity>
        </View>
      </View>
    );
  }
}))

const styles = StyleSheet.flatten({
  naviBar: {
    width,
    height:  Platform.OS === 'ios' ? 50 : 60,
    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
