import type { AnyProfileView } from '@atcute/bluesky';
import type { ModerationOptions } from '@atcute/bluesky-moderation';

import { SubscribeProfileDialog } from '#/components/activity-notifications/SubscribeProfileDialog';
import * as Dialog from '#/components/Dialog';
import { Button, ButtonIcon } from '#/components/web/Button';

import BellPlusIcon from '#/icons/central-custom/BellPlus_round_outlined_radius1_stroke2.svg';
import BellRingingIcon from '#/icons/central-custom/BellRinging_round_filled_radius1_stroke2.svg';
import { m } from '#/paraglide/messages';

/** Round bell button opening the activity-subscription dialog. */
export function SubscribeProfileButton({
	moderationOpts,
	profile,
}: {
	moderationOpts: ModerationOptions;
	profile: AnyProfileView;
}) {
	const handle = Dialog.useDialogHandle();

	const name = profile.handle;
	const isSubscribed =
		profile.viewer?.activitySubscription?.post || profile.viewer?.activitySubscription?.reply;
	const Icon = isSubscribed ? BellRingingIcon : BellPlusIcon;

	return (
		<>
			<Dialog.Trigger
				handle={handle}
				render={
					<Button
						color="secondary"
						label={m['components.activityNotifications.whenPostsHint']({ name })}
						shape="round"
						size="small"
					>
						<ButtonIcon icon={Icon} size="md" />
					</Button>
				}
			/>
			<SubscribeProfileDialog handle={handle} moderationOpts={moderationOpts} profile={profile} />
		</>
	);
}