import React, {PropsWithChildren} from 'react';
import {View} from 'react-native';
import {useTranslation} from 'react-i18next';
import {IconDotsVertical} from '@tabler/icons-react-native';
import {Avatar} from '@components/_HuGo/Avatar';
import {Typography} from '@components/_core/Typography';
import {IconButton} from '@components/_HuGo/Button';
import {useUser} from '@redux/selectors';

import {HeaderBox} from '../HeaderBox';
import {styles} from './styles';
import {SubheaderChips, SubheaderSearch, SubheaderTabs} from '../Subheader';

interface HeaderProfileProps extends PropsWithChildren {
  onDotsVerticalPress?: () => void;
}

export function HeaderProfile({
  onDotsVerticalPress,
  children,
}: HeaderProfileProps) {
  const user = useUser();
  const {t} = useTranslation();

  return (
    <>
      <HeaderBox style={styles.container}>
        <View style={styles.leftContainer}>
          <Avatar rounded size="md" url={user.profilePicture} />
          <Typography
            variant="m"
            weight="semiBold"
            numberOfLines={1}
            maxFontSizeMultiplier={1}
            style={styles.text}>
            {t('general.hi_user', {user: user.firstName})}
          </Typography>
        </View>
        {onDotsVerticalPress && (
          <IconButton
            Icon={IconDotsVertical}
            onPress={onDotsVerticalPress}
            variant="tertiary"
          />
        )}
      </HeaderBox>
      {children}
    </>
  );
}

HeaderProfile.SubheaderChips = SubheaderChips;
HeaderProfile.SubheaderSearch = SubheaderSearch;
HeaderProfile.SubheaderTabs = SubheaderTabs;
