import { type PropsWithChildren, useState } from 'react';
import { type DisplayRestrictions, ModerationCauseType } from '@atcute/bluesky-moderation';
import { useGoBack } from '#/lib/hooks/use-go-back';
import { useModerationCauseDescription } from '#/state/moderation/use-moderation-cause-description';
import * as Dialog from '#/components/Dialog';
import { ModerationDetailsDialog } from '#/components/moderation/ModerationDetailsDialog';
import { Text } from '#/components/Text';
import { Button, ButtonText } from '#/components/web/Button';
import { m } from '#/paraglide/messages';
import * as css from './ScreenHider.css';
export function ScreenHider({
screenDescription,
modui,
className,
children,
}: PropsWithChildren<{
screenDescription: string;
modui: DisplayRestrictions;
className?: string;
}>) {
const [override, setOverride] = useState(false);
const onPressBack = useGoBack();
const handle = Dialog.useDialogHandle();
const blur = modui.blurs[0];
const desc = useModerationCauseDescription(blur);
if (!blur || override) {
return <div className={className}>{children}</div>;
}
const isNoPwi = !!modui.blurs.find(
(cause) =>
cause.type === ModerationCauseType.Label && cause.labelDef.identifier === '!no-unauthenticated',
);
return (
<div className={css.container}>
<div className={css.badgeWrap}>
<div className={css.badge}>
<desc.icon className={css.icon} />
</div>
</div>
<Text className={css.title} size="_4xl" weight="semiBold">
{isNoPwi ? m['common.session.signInRequiredTitle']() : m['common.moderation.contentWarning']()}
</Text>
{isNoPwi ? (
<Text className={css.body} color="textContrastMedium" size="lg">
{m['components.moderation.signInRequired.message']()}
</Text>
) : (
<Text className={css.body} color="textContrastMedium" size="lg">
{m['components.moderation.label.flaggedPrefix']({ type: screenDescription })}{' '}
<Text color="text" size="lg" weight="semiBold">
{desc.name}.{' '}
</Text>
<Dialog.Trigger
aria-label={m['components.moderation.label.learnMore.aboutWarning']()}
className={css.learnMore}
handle={handle}
>
<Text color="textLink" size="lg">
{m['components.moderation.label.learnMore.label']()}
</Text>
</Dialog.Trigger>
</Text>
)}
{!isNoPwi && <ModerationDetailsDialog handle={handle} modcause={blur} />}
<div className={css.spacer} />
<div className={css.buttonRow}>
<Button
className={css.pill}
color="primary"
label={m['common.action.goBack']()}
onClick={onPressBack}
size="large"
variant="solid"
>
<ButtonText>{m['common.action.goBack']()}</ButtonText>
</Button>
{!modui.noOverride && (
<Button
className={css.pill}
color="secondary"
label={m['common.moderation.showAnyway']()}
onClick={() => setOverride((v) => !v)}
size="large"
variant="solid"
>
<ButtonText>{m['common.moderation.showAnyway']()}</ButtonText>
</Button>
)}
</div>
</div>
);
}