import { type FC } from 'react';

import HuAvatar from '@material-hu/components/design-system/Avatar';
import HuBadge from '@material-hu/components/design-system/Badge';
import HuTooltip from '@material-hu/components/design-system/Tooltip';

import useHuGoTheme from 'src/hooks/useHuGoTheme';
import { UserAccountStatus, UserTrackingStatus } from 'src/types/timeTracking';
import { type User } from 'src/types/user';
import { useLokaliseTranslation } from 'src/utils/i18n';
import { statusColor } from 'src/utils/timeTracking';
import { getInitials } from 'src/utils/userUtils';

import { TOOLTIP_DELAY } from '../constants';

type Props = {
  status: UserTrackingStatus;
  userInfo: Pick<User, 'id' | 'profilePicture' | 'fullName'>;
  size?: 'small' | 'medium' | 'large';
  userAccountStatus?: UserAccountStatus;
};

const ProfilePicWithStatus: FC<Props> = props => {
  const { size = 'small', status, userInfo, userAccountStatus } = props;
  const { t } = useLokaliseTranslation('time_tracker');
  const HuGoThemeProvider = useHuGoTheme();

  const badgeSize = size === 'small' ? 8 : 16;
  const isInactive = status === UserTrackingStatus.INACTIVE;
  const isDeactivated = userAccountStatus === UserAccountStatus.DEACTIVATED;

  return (
    <HuGoThemeProvider>
      <HuTooltip
        title={
          isDeactivated
            ? t('general:deactivated_collaborator')
            : t('TOOLTIP', { context: status })
        }
        description={t('TOOLTIP_DESCRIPTION', { context: status })}
        direction="bottom"
        delay={TOOLTIP_DELAY}
        disableTooltip={isInactive} // Won't show tooltip if status is inactive
      >
        <span>
          <HuBadge
            anchorOrigin={{
              horizontal: 'right',
              vertical: 'bottom',
            }}
            sx={{
              ...(!isInactive && {
                '.MuiBadge-dot': {
                  backgroundColor: ({ palette }) =>
                    statusColor(palette)[status],
                  border: `${size === 'small' ? '1px' : '2px'} solid`,
                  borderColor: ({ palette }) =>
                    palette.new.background.layout.tertiary,
                  borderRadius: '50%',
                  height: badgeSize,
                  width: badgeSize,
                  right: `calc(0% + ${badgeSize / 2}px)`,
                  bottom: `calc(0% + ${badgeSize / 2}px)`,
                },
              }),
            }}
            variant="dot"
          >
            <HuAvatar
              src={userInfo.profilePicture || undefined}
              alt={`${userInfo.fullName} profile picture`}
              text={getInitials(userInfo?.fullName || '')}
              size={size}
            />
          </HuBadge>
        </span>
      </HuTooltip>
    </HuGoThemeProvider>
  );
};

export default ProfilePicWithStatus;