import React from 'react';
import { SafeAreaView, Text, Image, Alert, Linking, TouchableOpacity, StyleSheet, View, TextInput, Platform, ScrollView } from 'react-native';
import { colors } from '../assets/styles/colors-theme';
import AsyncStorage from '@react-native-community/async-storage';
import { width, height } from '../services/screen';
import { inject, observer } from "mobx-react"
import { observable, makeObservable } from 'mobx'
import Icon from 'react-native-vector-icons/dist/AntDesign';
import GoogleIcon from 'react-native-vector-icons/dist/MaterialCommunityIcons'
import FontAwesome from 'react-native-vector-icons/dist/FontAwesome5'
import FastImage from 'react-native-fast-image'
import { getStatusBarHeight } from "react-native-safearea-height";
import { color } from 'react-native-reanimated';
import { images } from '../assets/images/imageIndex'
Icon.loadFont();
GoogleIcon.loadFont()
const TitleBar = inject("appStore")(observer(class TitleBar extends React.Component {

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

        });
    }

    userInfoPressAction() {
        if (this.store.logined) {
            this.props.navigation.navigate('Profile')
        } else {
            this.props.navigation.navigate('Signin')
        }
    }



    render() {
        return (
            <View style={{
                width: width,
                height: 50,
                marginTop: this.props.inside ? 20 : Platform.OS == 'ios' ? getStatusBarHeight() : getStatusBarHeight() + 15,
            }}>
                <View style={{ flexDirection: "row", flex: 1, height: 30 }}>
                    {this.props.back ? (<TouchableOpacity style={{ flex: 0.2, justifyContent: 'flex-start', }}
                        onPress={() => { this.props.navigation.goBack() }}>
                        <Icon name='arrowleft' size={20} color={colors.fontColor} style={{ marginLeft: 30 }} />
                    </TouchableOpacity>) : (<View style={{ flex: 0.2 }} />)}

                    <View style={{ flex: 0.6, justifyContent: 'center', alignItems: 'center' }}>
                        <Image source={images.titleBarLogo} style={{ height: 50, }} resizeMode='contain' />
                    </View>
                    {this.props.user ? (
                        <TouchableOpacity style={{ flex: 0.2, height: 50, justifyContent: 'center', alignItems: 'flex-end', }}
                            onPress={() => this.userInfoPressAction()}
                        >
                            <GoogleIcon name='account' size={35} color={colors.fontColor} style={{ marginRight: 20 }} />
                        </TouchableOpacity>
                    ) : (<View style={{ flex: 0.2 }} />)}

                </View>

            </View >
        )
    }
}))


const styles = StyleSheet.flatten({

    home_rectanglecd25b34b: {
        opacity: 1,
        flex: 1,
        paddingVertical: 10,
        marginTop: 50,
    },
})
export default TitleBar