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" />;
}