import React, { useState, useContext } from 'react';
import Styled from 'styled-components/native';
import IconButton from '../UIControls/IconButton';
import { Platform, PixelRatio, View } from 'react-native';
import { TouchableOpacity } from 'react-native-gesture-handler';
import { SelectboxListArea } from '../UIControls/Selectbox';
import Hamburg from '~/Assets/Svgs/menu.svg';
import Setting from '~/Assets/Svgs/setting.svg';
import session from '~/Utils/session';
import { NavigationContext } from 'react-navigation';
import { Util } from '~/Utils/utils';
import { Config } from '~/Configuration';

const HeaderContainer = Styled.View`
    height: 50px;
    flex-direction: row;
    justify-content: space-between;
    align-items:center;
    border: 0px solid #e9e9e9;
    border-bottom-width: 1;
    background-color: #fff;
    overflow: hidden;
`;
const HamburgContainer = Styled.TouchableOpacity`
    height:100%;
    padding-left:15px;
    padding-right:15px;
    align-items:center;
    justify-content:center;
`;
const LogoContainer = Styled.TouchableOpacity`
    height: 100%;
    align-items:center;
    justify-content:center;
`;
const SettingContainer = Styled.TouchableOpacity`
    height:100%;
    padding-left:15px;
    padding-right:15px;
    align-items:center;
    justify-content:center;
`;
const Logo = Styled.Image`
    height: 20px;
    width: 100px;
`;



export default NavigationHeader = ({ navigation, showMenu=false }) => {
    const [menu, setMenu] = useState(session.getMenus());
    const [dummy] = useState(Math.random());

    return (
        <HeaderContainer>
            <HamburgContainer onPress={navigation.openDrawer}>
                <Hamburg width={17} height={15} />
            </HamburgContainer>
            <LogoContainer onPress={() => { navigation.navigate('Dashboard'); }}>
                <Logo source={{uri:`${Config.BASE_URL}/files/static/app_logo.png?dummy=${dummy}`, headers:{Pragma:'no-cache'}, cache:'reload'}} 
                    style={{ resizeMode: 'contain' }} />
            </LogoContainer>
            <SettingContainer onPress={() => Util.navigate(navigation, session.getMenu('/Setting/BottomShortcut')) }>
                <Setting width={20} height={21} />
            </SettingContainer>
        </HeaderContainer>
    );
};