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 { m } from '#/paraglide/messages';
import type { SearchHistoryEntry } from '#/storage';

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

/** a recent-history profile, with a control to drop it from the stored history. */
export function RecentProfileRow({
	onRemoveRecent,
	row,
}: {
	onRemoveRecent: (entry: SearchHistoryEntry) => void;
	row: Extract<ListRow, { kind: 'recentProfile' }>;
}) {
	const moderationOpts = useModerationOpts();
	const moderation = moderationOpts
		? getDisplayRestrictions(moderateProfile(row.profile, moderationOpts), DisplayContext.ProfileMedia)
		: undefined;

	return (
		<div className={styles.row}>
			<Autocomplete.Item className={styles.item} 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>
			<RecentRemoveButton
				label={m['components.web.search.recent.removeA11y']({ query: row.profile.handle })}
				onRemove={() => onRemoveRecent({ kind: 'profile', did: row.profile.did })}
			/>
		</div>
	);
}