import React from 'react';
import { AtomButtonDefault } from 'native/atoms/Buttons/Default';
import { AtomButtonGhost } from 'native/atoms/Buttons/Ghost';
import { AtomIcon } from 'native/atoms/Icon';
import { AtomLogo, ILogoProps } from 'native/atoms/Logo';
import {
  IHamburguerMenuProps,
} from '../HamburguerMenu';
import { OrganismsTierLevel, ITierLevelProps } from '../TierLevel';
import {
  HeaderContainer,
  NotLoggedContainer,
  LoginRegisterButtons,
  LoggedContainer,
  UserProfile,
  HeaderElements,
  UserProfileContainer,
  UserNameAndIcon,
} from './styles';
import { AtomButtonOutline } from 'native/atoms/Buttons/Outline';
import { AtomSubtitle } from 'native/atoms/Typography/Subtitle';
import { ILogoTheme } from 'native/atoms/Logo/types';

export interface IGobalHeaderProps
  extends Omit<IHamburguerMenuProps, 'onPress' | 'menuElements'>,
    ITierLevelProps,
    Omit<ILogoProps, 'style' | 'size'> {
  /** to verify f the menu is available or not */
  isAvailable: boolean;
  /** yo verify if user is logged o no */
  logged: boolean;
  /** user name to show in the header */
  userName: string;
  /** Greetings before the user name */
  greetings: string;
  /** Theme for Logo*/
  logoTheme: ILogoTheme
  /** action to click in User */
  handleOnPressUser?: (e?: any) => void;
  /** action to click in Log out button */
  handleOnPressLogOut?: (e?: any) => void;
  /** action when click the logo */
  handleOnPressLogo?: (e?: any) => void;
  /** action when press on tier component*/
  handleOnPressTier? : (e?: any) => void;
}

export const OrganismGlobalHeader = ({
  isAvailable,
  logged,
  actualPoints,
  actualTier,
  nextPoints,
  nextTier,
  iconName,
  userName,
  greetings,
  logoTheme = 'light',
  text,
  url,
  handleOnPressUser,
  handleOnPressLogOut,
  handleOnPressLogo,
  handleOnPressTier,
}: IGobalHeaderProps) => {

  return (
    <HeaderContainer isAvailable={isAvailable}>
      {logged ? (
        <LoggedContainer testID='loggedContainer'>
          <HeaderElements>
            <AtomLogo
              size='small'
              logoTheme={logoTheme || 'light'}
              text={text}
              url={url}
              onPress = {handleOnPressLogo}
            />
            <UserProfileContainer>
              <UserNameAndIcon isAvailable={isAvailable}>
                <AtomSubtitle
                  size={'xsmall'}
                  weight='regular'
                  text={`${greetings}, ${userName}!`}
                  styles = {{marginRight: '2%'}}
                />
                <AtomIcon name={'earn_beer'} size={22} />
              </UserNameAndIcon>

              {isAvailable ? (
                <UserProfile onPress={handleOnPressUser}>
                  <AtomIcon name={'user'} size={16} />
                </UserProfile>
              ) : (
                <AtomButtonOutline
                  text={'Log out'}
                  disabled={false}
                  color={'primary'}
                  width='102px'
                  size='medium'
                  style={{ padding: '2%', height: '32px' }}
                  onPress={handleOnPressLogOut}
                />
              )}
            </UserProfileContainer>
          </HeaderElements>
          {isAvailable && (
            <OrganismsTierLevel
              iconName={iconName}
              colorProgress={'quaternary500'}
              actualPoints={actualPoints}
              actualTier={actualTier}
              nextPoints={nextPoints}
              nextTier={nextTier}
              type={'desktop'}
              style= {{paddingLeft:'2%', paddingRight:'2%'}}
              handleClick = {handleOnPressTier}
            />
          )}
        </LoggedContainer>
      ) : (
        <NotLoggedContainer testID='notLoggedContainer'>
          <AtomLogo size={'small'} logoTheme={'light'} text='sided' url={url} />
          <LoginRegisterButtons>
            <AtomButtonDefault
              disabled={false}
              color={'primary'}
              text={'Sign Up'}
              size='medium'
              width='102px'
              style={{ padding: '2%', height: '32px' }}
            />
            <AtomButtonGhost
              disabled={false}
              color={'primary'}
              text={'Login'}
              size='medium'
              width='102px'
              style={{ padding: '2%', height: '32px' }}
            />
          </LoginRegisterButtons>
        </NotLoggedContainer>
      )}
    </HeaderContainer>
  );
};
