import { DisplayContext, getDisplayRestrictions, moderateProfile } from '@atcute/bluesky-moderation';

import { Autocomplete } from '@base-ui/react/autocomplete';

import { useModerationOpts } from '#/state/moderation/moderation-opts';

import { Text } from '#/components/Text';
import { UserAvatar } from '#/components/UserAvatar';

import type { ListRow } from './model';
import * as styles from './ProfileRow.css';

/** a selectable profile row: avatar plus display name and handle. */
export function ProfileRow({ row }: { row: Extract<ListRow, { kind: 'profile' }> }) {
	const moderationOpts = useModerationOpts();
	const moderation = moderationOpts
		? getDisplayRestrictions(moderateProfile(row.profile, moderationOpts), DisplayContext.ProfileMedia)
		: undefined;

	return (
		<Autocomplete.Item className={styles.row} value={row}>
			<UserAvatar
				avatar={row.profile.avatar}
				className={styles.avatar}
				moderation={moderation}
				size={36}
				type={row.profile.associated?.labeler ? 'labeler' : 'user'}
			/>

			<span className={styles.text}>
				<Text numberOfLines={1} weight="medium">
					{row.profile.handle}
				</Text>
				{row.profile.displayName ? (
					<Text color="textContrastMedium" numberOfLines={1} size="md_sub">
						{row.profile.displayName}
					</Text>
				) : null}
			</span>
		</Autocomplete.Item>
	);
}