import type { ReactNode } from 'react';
import {
isChatPreferenceName,
type NotificationSettingsPreferenceName,
useChatNotificationSettingsQuery,
useNotificationSettingsQuery,
} from '#/state/queries/notifications/settings';
import { PreferenceControls } from '#/screens/Settings/NotificationSettings/components/PreferenceControls';
import * as Dialog from '#/components/Dialog';
import { Stack } from '#/components/Stack';
import { Text } from '#/components/Text';
import { Admonition } from '#/components/web/Admonition';
import { m } from '#/paraglide/messages';
import * as styles from './NotificationSettingsDialog.css';
type NotificationSettingsDialogProps = {
allowDisableInApp?: boolean;
handle: Dialog.DialogHandle;
name: NotificationSettingsPreferenceName;
subtitleText: ReactNode;
syncOthers?: NotificationSettingsPreferenceName[];
titleText: ReactNode;
};
export function NotificationSettingsDialog({
allowDisableInApp = true,
handle,
name,
subtitleText,
syncOthers,
titleText,
}: NotificationSettingsDialogProps) {
return (
<Dialog.Root handle={handle}>
<Dialog.Popup size="narrow">
<Inner
allowDisableInApp={allowDisableInApp}
name={name}
subtitleText={subtitleText}
syncOthers={syncOthers}
titleText={titleText}
/>
</Dialog.Popup>
</Dialog.Root>
);
}
function Inner({
allowDisableInApp,
name,
subtitleText,
syncOthers,
titleText,
}: Omit<NotificationSettingsDialogProps, 'handle'>) {
const isChat = isChatPreferenceName(name);
const appQuery = useNotificationSettingsQuery({ enabled: !isChat });
const chatQuery = useChatNotificationSettingsQuery({ enabled: isChat });
const isError = isChat ? chatQuery.isError : appQuery.isError;
const preference = isChat ? chatQuery.data?.[name] : appQuery.data?.[name];
return (
<Stack gap="lg">
<Stack gap="xs">
<Dialog.TitleRow>
<Dialog.Title>{titleText}</Dialog.Title>
<Dialog.Close />
</Dialog.TitleRow>
<Text color="textContrastMedium" size="md">
{subtitleText}
</Text>
</Stack>
{isError ? (
<div className={styles.errorWrap}>
<Admonition type="error">{m['common.notifications.loadSettingsError']()}</Admonition>
</div>
) : (
<PreferenceControls
allowDisableInApp={allowDisableInApp}
name={name}
preference={preference}
syncOthers={syncOthers}
/>
)}
</Stack>
);
}