import type { AppBskyActorDefs } from '@atcute/bluesky';

import { conversationTarget } from '#/lib/routes/targets';

import { useGetConvoAvailabilityQuery } from '#/state/queries/messages/get-convo-availability';
import { useGetConvoForMembers } from '#/state/queries/messages/get-convo-for-members';

import * as css from '#/components/dms/MessageProfileButton.css';
import { canBeMessaged } from '#/components/dms/util';
import * as Toast from '#/components/Toast';
import { Button, ButtonIcon } from '#/components/web/Button';

import Message from '#/icons/central/BubbleAnnotation3_round_outlined_radius1_stroke2.svg';
import { m } from '#/paraglide/messages';
import { useRouter } from '#/router';

/** Round button that opens (or starts) a DM with the profile, when the viewer is allowed to message them. */
export function MessageProfileButton({ profile }: { profile: AppBskyActorDefs.ProfileViewDetailed }) {
	const router = useRouter();

	const { data: convoAvailability } = useGetConvoAvailabilityQuery(profile.did);
	const { mutate: initiateConvo } = useGetConvoForMembers({
		onError: () => {
			Toast.show(m['common.chat.error.create']());
		},
		onSuccess: ({ convo }) => {
			router.navigate({ to: conversationTarget(convo.id) });
		},
	});

	const onPress = () => {
		if (!convoAvailability?.canChat) {
			return;
		}
		if (convoAvailability.convo) {
			router.navigate({ to: conversationTarget(convoAvailability.convo.id) });
		} else {
			initiateConvo([profile.did]);
		}
	};

	if (!convoAvailability) {
		// pending state, sized to the button to avoid layout shift
		if (canBeMessaged(profile)) {
			return (
				<div aria-hidden className={css.loading}>
					<Message className={css.messageIcon} />
				</div>
			);
		}
		return null;
	}

	if (convoAvailability.canChat) {
		return (
			<Button
				color="secondary"
				label={m['components.dms.chat.action.message']({ handle: profile.handle })}
				onClick={onPress}
				shape="round"
				size="small"
				variant="solid"
			>
				<ButtonIcon icon={Message} size="md" />
			</Button>
		);
	}

	return null;
}