import type { AnyProfileView } from '@atcute/bluesky';
import { useSession } from '#/state/session';
import * as css from '#/components/BotAccountAlert.css';
import * as Dialog from '#/components/Dialog';
import { Text } from '#/components/Text';
import { Button, ButtonText } from '#/components/web/Button';
import RobotIcon from '#/icons/central/Robot_round_filled_radius1_stroke2.svg';
import { m } from '#/paraglide/messages';
import { useRouter } from '#/router';
export function BotAccountAlert({
handle,
profile,
}: {
handle: Dialog.DialogHandle;
profile: AnyProfileView;
}) {
return (
<Dialog.Root handle={handle}>
<Dialog.Popup label={m['common.account.automated']()} size="narrow">
<DialogInner handle={handle} profile={profile} />
</Dialog.Popup>
</Dialog.Root>
);
}
function DialogInner({ handle, profile }: { handle: Dialog.DialogHandle; profile: AnyProfileView }) {
const { currentAccount } = useSession();
const router = useRouter();
const isSelf = profile.did === currentAccount?.did;
const description = isSelf
? m['components.botAccountAlert.descriptionByYou']()
: m['components.botAccountAlert.descriptionByOwner']();
return (
<div className={css.body}>
<RobotIcon className={css.icon} />
<Text align="center" className={css.text} color="textContrastHigh" size="md">
{description}
</Text>
<Dialog.Actions direction="column">
<Button color="primary" label={m['common.action.okay']()} onClick={() => handle.close()} size="large">
<ButtonText>{m['common.action.okay']()}</ButtonText>
</Button>
{isSelf && (
<Button
color="secondary"
label={m['components.botAccountAlert.openSettings']()}
onClick={() => {
handle.close();
router.navigate({ to: { name: 'AccountSettings' } });
}}
size="large"
>
<ButtonText>{m['components.botAccountAlert.openSettings']()}</ButtonText>
</Button>
)}
</Dialog.Actions>
</div>
);
}