import type { AppBskyActorDefs } from '@atcute/bluesky';
import { differenceInSeconds } from '@mary/date-fns';
import { useConstant } from '#/lib/hooks/use-constant';
import { useSession } from '#/state/session';
import { relativeMessageParts } from '#/locale/intl/timeAgo';
import * as Dialog from '#/components/Dialog';
import * as styles from '#/components/NewskieDialog.css';
import { Stack } from '#/components/Stack';
import * as StarterPackCard from '#/components/StarterPack/StarterPackCard';
import { Text } from '#/components/Text';
import Newskie from '#/icons/central-custom/Newskie_round_filled_radius1_stroke2.svg';
import { m } from '#/paraglide/messages';
export function NewskieDialog({
profile,
disabled,
}: {
profile: AppBskyActorDefs.ProfileViewDetailed;
disabled?: boolean;
}) {
const handle = Dialog.useDialogHandle();
const createdAt = profile.createdAt;
const now = useConstant(() => new Date());
const daysOld = createdAt ? differenceInSeconds(now, new Date(createdAt)) / 86400 : Infinity;
if (!createdAt || daysOld > 7) {
return null;
}
return (
<Dialog.Root handle={handle}>
<Dialog.Trigger
aria-label={m['components.newskieDialog.a11y.hint']()}
className={styles.trigger}
disabled={disabled}
>
<Newskie className={styles.triggerIcon} />
</Dialog.Trigger>
<Dialog.Popup size="narrow" label={m['components.newskieDialog.a11y.label']()}>
<DialogInner profile={profile} createdAt={createdAt} now={now} onClose={() => handle.close()} />
<Dialog.Close variant="floating" />
</Dialog.Popup>
</Dialog.Root>
);
}
function DialogInner({
profile,
createdAt,
now,
onClose,
}: {
profile: AppBskyActorDefs.ProfileViewDetailed;
createdAt: string;
now: Date;
onClose: () => void;
}) {
const { currentAccount } = useSession();
const isMe = profile.did === currentAccount?.did;
const profileName = profile.handle;
const getJoinMessage = () => {
const parts = relativeMessageParts(createdAt, now);
if (isMe) {
if (profile.joinedViaStarterPack) {
return m['components.newskieDialog.joinedViaStarterPackSelf'](parts);
}
return m['components.newskieDialog.joinedAgoSelf'](parts);
}
if (profile.joinedViaStarterPack) {
return m['components.newskieDialog.joinedViaStarterPack']({ ...parts, name: profileName });
}
return m['components.newskieDialog.joinedAgo']({ ...parts, name: profileName });
};
return (
<Stack gap="md">
<div className={styles.header}>
<div className={styles.icon}>
<Newskie className={styles.headerIcon} />
</div>
<Text size="xl" weight="semiBold">
{isMe ? m['components.newskieDialog.welcome']() : m['common.compose.sayHello']()}
</Text>
</div>
<Text size="md" align="center">
{getJoinMessage()}
</Text>
{profile.joinedViaStarterPack ? (
<StarterPackCard.Link starterPack={profile.joinedViaStarterPack} onPress={onClose}>
<div className={styles.starterPack}>
<StarterPackCard.Card starterPack={profile.joinedViaStarterPack} />
</div>
</StarterPackCard.Link>
) : null}
</Stack>
);
}