import React from 'react'

import Avatar from '../avatar'
import Box from '../box'
import { useStyleConfig, vui } from '../core'
import T from '../t'
import { cs } from '../utils'
import { useHeaderContext } from './context'
import { HeaderAccountUserInfoProps } from './headerAccount.types'

/** Displays user information, like username and company name, within HeaderAccount part. */
export const HeaderAccountUserInfo = vui<'div', HeaderAccountUserInfoProps>((props, ref) => {
  const { children, className, color, companyName, displayName, isApplication, role, ...rest } = props
  const styles = useStyleConfig('Header', useHeaderContext())
  const localColor = color || styles.accountUserInfo.color || 'darkBlue.main'

  return (
    <Box
      className={cs('vui-headerAccountUserInfo', className)}
      p={2}
      pb={1}
      ref={ref}
      spaceX={2}
      {...styles.accountUserInfo}
      {...rest}
      lineHeight={isApplication ? '18px' : 'inherit'}
      pr={isApplication ? 0 : 'inherit'}
      textAlign={isApplication ? 'right' : 'inherit'}
    >
      {children ?? (
        <>
          {!isApplication && (
            <Avatar className="vui-headerAccountUserInfoAvatar" name={displayName} size="xl" variant="solidDarkBlue" />
          )}
          <Box column rowGap={role ? 0 : 0.5}>
            {displayName && (
              <T
                color={localColor}
                fontSize={isApplication ? '12px' : 'inherit'}
                isTruncated
                pr={1}
                title={displayName}
                weight="demi"
              >
                {displayName}
              </T>
            )}
            {companyName && (
              <T
                color={localColor}
                fontSize={isApplication ? '12px' : 'inherit'}
                isTruncated
                pr={1}
                title={companyName}
              >
                {companyName}
              </T>
            )}
            {role && (
              <T
                color={localColor}
                fontSize={isApplication ? '12px' : 'inherit'}
                isTruncated
                opacity={0.65}
                pr={1}
                title={role}
              >
                {role}
              </T>
            )}
          </Box>
        </>
      )}
    </Box>
  )
})

HeaderAccountUserInfo.displayName = 'HeaderAccountUserInfo'

export default HeaderAccountUserInfo
