import React from 'react'
import { StyleSheet, TouchableOpacity, View } from 'react-native'
import { OIcon, OText } from '../shared'
import styled, { useTheme } from 'styled-components/native'
import { useSession, useLanguage } from 'ordering-components-Ubanku-Custom/native'
import FastImage from 'react-native-fast-image'
import Ionicons from 'react-native-vector-icons/Ionicons'
import SimpleLineIcons from 'react-native-vector-icons/SimpleLineIcons'
import { ImageContainer, IconsContainer } from './styles'

export const Header = (props : {navigation : any}) => {
    const { navigation } = props
    const theme = useTheme()
    const [{ user }] = useSession()
    const [, t] = useLanguage()
    const styles = StyleSheet.create({
        HeaderContainer: {
            backgroundColor: `${theme?.colors?.primary}`,
            padding: 20,
            justifyContent: 'space-between',
            flexDirection: 'row'
        },
        photo: {

        }
    })

    return (
        <View style={styles.HeaderContainer}>
            <ImageContainer onPress={() => navigation.navigate('Profile')}>
                {user?.photo ? (
                    <View style={styles.photo}>
                        <FastImage
                            style={{ height: 40, width: 40, borderRadius: 40 }}
                            source={{
                                uri: user?.photo,
                                priority: FastImage.priority.normal,
                            }}
                            resizeMode={FastImage.resizeMode.cover}
                        />
                    </View>
                ) : <Ionicons name='person-outline' size={38} style={{ marginRight: 2 }} />}
                <OText mLeft={5} size={18}>
                    {t('HELLO', 'Hello')} {user?.name}!
                </OText>
            </ImageContainer>
            <IconsContainer>
                <TouchableOpacity onPress={() => navigation.navigate('SocialImpact')}>
                    <Ionicons
                        name='earth-outline'
                        size={22}
                        style={{ marginRight: 10 }}
                    />
                </TouchableOpacity>
                <TouchableOpacity onPress={() => navigation.navigate('Education')}>
                    <SimpleLineIcons
                        name='graduation'
                        size={22}
                        style={{ marginRight: 10 }}
                    />
                </TouchableOpacity>
            </IconsContainer>
        </View>
    )
}
