import React, { Fragment, useEffect, useState, useRef } from 'react';
import Styled from 'styled-components/native';
import IconButton from '../UIControls/IconButton';
import { Platform, Text, Picker, View } from 'react-native';
import Menu from '~/Menu';
import { TouchableOpacity } from 'react-native-gesture-handler';
import MenuPicker from '~/Components/Layouts/MenuPicker';
import Theme from '~/Themes';
import MenuIcon from '~/Assets/Svgs/menu.svg';
import LeftIcon from '~/Assets/Svgs/left.svg';
import session from '~/Utils/session';
import { NavigationActions } from 'react-navigation';
import { Util } from '~/Utils/utils';

const Container = Styled.View`
    background-color: #fff;
`;
const HeaderContainer = Styled.View`
    height: 50;
    flex-direction: row;
    justify-content: space-between;
    border-color: #e9e9e9;
    border-bottom-width: 1px;
`;
const HamburgContainer = Styled.TouchableOpacity`
    height:100%;
    padding-left:15px;
    padding-right:15px;
    align-items:center;
    justify-content:center;
`;
const LeftContainer = Styled.TouchableOpacity`
    height:100%;
    padding-left:19px;
    padding-right:19px;
    align-items:center;
    justify-content:center;
`;
const Title = Styled.View`
    flex: 1;
    flex-direction: row;
    height: 100%;
    align-items: center;
    justify-content: flex-start;
`;
const TitleText = Styled.Text`
    text-align: center;
    text-align-vertical: center;
    font-size: 20;
    letter-spacing: -2;
    font-family: ${Theme.Fonts.Medium};
    include-font-padding: false;
`;
const ButtonContainer = Styled.View`
    flex-direction: row;
    align-items: center;
    padding-right: 17px;
`;

const MenuContainer = Styled.View`
`;
const MenuFirstLine = Styled.ScrollView`
    width: 100%;
    flex-direction: row;
`;
const MenuFirstItemFlex = Styled.View`
    border: 0px solid #e9e9e9;
    border-bottom-width: 1;
`;
const MenuFirstItem = Styled.TouchableOpacity`
    width: 94;
    height: 45;
    border: 0px solid #e9e9e9;
    border-bottom-width: 1;
    align-items: center;
    justify-content: center;
    padding-left: 10;
    padding-right: 10;
`;
const MenuFirstLabel = Styled.Text`
    font-family: ${Theme.Fonts.Medium};
    font-size: 16;
    line-height: 24;
    letter-spacing: -1.6;
    color: #707070;
`;
const MenuFirstItemActive = Styled(MenuFirstItem)`
    border: 0px solid #0b83e6;
    border-bottom-width: 3;
`;
const MenuFirstLabelActive = Styled(MenuFirstLabel)`
    color: #0b83e6;
`;
const MenuSecondLine = Styled.ScrollView`
    flex-direction: row;
    width: 100%;
    height: 45;
    border: 0px solid #e9e9e9;
    border-bottom-width: 1;
    padding-left: 3;
    padding-right: 3;
`;
const MenuSecondItem = Styled.TouchableOpacity`
    height: 100%;
    padding-left: 15;
    padding-right: 15;
    align-items: center;
    justify-content: center;
`;
const MenuSecondLabel = Styled.Text`
    font-family: ${Theme.Fonts.Regular};
    font-size: 16;
    line-height: 24;
    letter-spacing: -1.6;
    color: #707070;
`;
const MenuSecondLabelActive = Styled(MenuSecondLabel)`
    color: #0b83e6;
`;

export default Header = ({route, navigation, title = '', titleParams = {}, main = true, buttons = <Fragment/> }) => {
    const TitleComponent = (typeof title === 'function' ? title : null);
    return (
        <Container>
            <HeaderContainer>
                { main && <HamburgContainer onPress={navigation.openDrawer}><MenuIcon width={17} height={15} /></HamburgContainer> }
                { !main && <LeftContainer onPress={() => navigation.pop()}><LeftIcon width={12} height={19} /></LeftContainer> }
                <Title>
                    {TitleComponent ? (
                        <TitleComponent {...titleParams} />
                    ) : (
                        <TitleText>{title}</TitleText>
                    )}
                </Title>
                <ButtonContainer>
                    {buttons}
                </ButtonContainer>
            </HeaderContainer>
        </Container>
    );
};