import type { ComAtprotoLabelDefs } from '@atcute/atproto';
import type { AppBskyFeedDefs } from '@atcute/bluesky';

import { clsx } from 'clsx';

import { useSession } from '#/state/session';

import * as Dialog from '#/components/Dialog';
import { LabelsOnMeDialog } from '#/components/moderation/LabelsOnMeDialog';
import { Button, ButtonIcon, type ButtonProps, ButtonText } from '#/components/web/Button';

import CircleInfo from '#/icons/central/CircleInfo_round_outlined_radius1_stroke2.svg';
import { m } from '#/paraglide/messages';

import * as styles from './LabelsOnMe.css';

export function LabelsOnMe({
	className,
	labels,
	size,
	type,
}: {
	className?: string;
	labels: ComAtprotoLabelDefs.Label[] | undefined;
	size?: ButtonProps['size'];
	type: 'account' | 'content';
}) {
	const { currentAccount } = useSession();
	const handle = Dialog.useDialogHandle();

	if (!labels || !currentAccount) {
		return null;
	}
	const filtered = labels.filter(
		(label) => !label.val.startsWith('!') && !(label.val === 'bot' && label.src === currentAccount.did),
	);
	if (!filtered.length) {
		return null;
	}

	return (
		<div className={clsx(styles.row, className)}>
			<LabelsOnMeDialog handle={handle} labels={filtered} type={type} />
			<Dialog.Trigger
				handle={handle}
				render={
					<Button
						color="secondary"
						label={m['components.moderation.label.viewInfo']()}
						size={size ?? 'small'}
						variant="solid"
					>
						<ButtonIcon icon={CircleInfo} />
						<ButtonText>
							{type === 'account'
								? m['components.moderation.label.placedOnAccount']({ count: filtered.length })
								: m['components.moderation.label.placedOnContent']({ count: filtered.length })}
						</ButtonText>
					</Button>
				}
			/>
		</div>
	);
}

export function LabelsOnMyPost({ className, post }: { className?: string; post: AppBskyFeedDefs.PostView }) {
	const { currentAccount } = useSession();
	if (post.author.did !== currentAccount?.did) {
		return null;
	}
	return <LabelsOnMe className={className} labels={post.labels} size="tiny" type="content" />;
}