import React, {ReactNode, useMemo} from 'react';
import {ImageStyle, StyleProp, TextStyle, View, ViewStyle} from 'react-native';
import {Avatar, AvatarProps} from '@components/Image/components/Avatar';
import {getTextVariant} from '@components/Image/utils';
import Text from '@components/Text';
import {COLORS} from '@shared/colors';
import {TUserName} from '@shared/utils';

import {styles} from './styles';

export interface AvatarWithNameProps extends AvatarProps {
  name: TUserName;
  detail?: string;
  avatarStyle?: StyleProp<ImageStyle>;
  nameStyle?: TextStyle;
  detailStyle?: TextStyle;
  renderDetail?: ReactNode;
  numberOfLines?: number;
  adjustsFontSizeToFit?: boolean;
  flexDirection?: 'row' | 'column';
  renderRightContent?: ReactNode;
  textContainerStyle?: StyleProp<ViewStyle>;
}

/**
 * @deprecated Use `_HuGo` components instead
 */
export function AvatarWithName({
  name,
  detail,
  style,
  avatarStyle,
  nameStyle,
  detailStyle,
  textContainerStyle,
  renderDetail,
  renderRightContent,
  numberOfLines = 1,
  adjustsFontSizeToFit = true,
  size = 'sm',
  flexDirection = 'row',
  ...props
}: AvatarWithNameProps) {
  const {nameVariant, detailVariant} = getTextVariant(size);
  const avatarName = useMemo(() => {
    if (typeof name === 'object') {
      return `${name.firstName} ${name.lastName || ''}`.trimEnd();
    }
    return name;
  }, [name]);

  return (
    <View style={[styles.container, style as StyleProp<ViewStyle>]}>
      <Avatar name={name} size={size} style={avatarStyle} {...props} />
      <View style={[styles.nameContent, {flexDirection}, textContainerStyle]}>
        <Text
          variant={nameVariant}
          numberOfLines={numberOfLines}
          adjustsFontSizeToFit={adjustsFontSizeToFit}
          style={nameStyle}>
          {avatarName}
        </Text>
        {renderDetail ? (
          renderDetail
        ) : (
          <>
            {!!detail && (
              <Text
                variant={detailVariant}
                numberOfLines={1}
                color={COLORS.DARK_GRAY}
                weight="regular"
                adjustsFontSizeToFit
                style={detailStyle}>
                {detail}
              </Text>
            )}
          </>
        )}
      </View>
      {renderRightContent}
    </View>
  );
}
