cinny/src/app/features/settings/notifications/Notifications.tsx

import React from 'react';
import { useAtomValue, useSetAtom } from 'jotai';
import { Box, Button, Text, IconButton, Icon, Icons, IconSrc, Scroll, config, toRem } from 'folds';
import { Page, PageContent, PageHeader } from '../../../components/page';
import { SystemNotification } from './SystemNotification';
import { AllMessagesNotifications } from './AllMessages';
import { SpecialMessagesNotifications } from './SpecialMessages';
import { KeywordMessagesNotifications } from './KeywordMessages';
import { PushRuleEditor } from './PushRuleEditor';
import { SequenceCard } from '../../../components/sequence-card';
import { SequenceCardStyle } from '../styles.css';
import { SettingTile } from '../../../components/setting-tile';
import { settingsAtom, Settings } from '../../../state/settings';

const PRESETS: Array<{
  label: string;
  icon: IconSrc;
  description: string;
  patch: Partial<Settings>;
}> = [
  {
    label: 'Gaming',
    icon: Icons.Ball,
    description: 'Notifications on, sounds off',
    patch: {
      showNotifications: true,
      isNotificationSounds: false,
      messageSoundId: 'none',
      inviteSoundId: 'none',
      quietHoursEnabled: false,
    },
  },
  {
    label: 'Work',
    icon: Icons.Monitor,
    description: 'All notifications and sounds on',
    patch: {
      showNotifications: true,
      isNotificationSounds: true,
      messageSoundId: 'notification',
      inviteSoundId: 'invite',
      quietHoursEnabled: false,
    },
  },
  {
    label: 'Sleep',
    icon: Icons.BellMute,
    description: 'All notifications off',
    patch: {
      showNotifications: false,
      isNotificationSounds: false,
      quietHoursEnabled: false,
    },
  },
];

function NotificationPresets() {
  const settings = useAtomValue(settingsAtom);
  const setSettings = useSetAtom(settingsAtom);

  const applyPreset = (patch: Partial<Settings>) => {
    setSettings({ ...settings, ...patch });
  };

  return (
    <Box direction="Column" gap="100">
      <Text size="L400">Quick Presets</Text>
      <SequenceCard className={SequenceCardStyle} variant="SurfaceVariant" direction="Column">
        <Box gap="300" style={{ padding: config.space.S300, flexWrap: 'wrap' }}>
          {PRESETS.map((preset) => (
            <Button
              key={preset.label}
              type="button"
              onClick={() => applyPreset(preset.patch)}
              title={preset.description}
              variant="Secondary"
              fill="Soft"
              radii="300"
              style={{
                height: 'unset',
                minWidth: toRem(80),
                padding: `${config.space.S200} ${config.space.S400}`,
              }}
            >
              <Box direction="Column" alignItems="Center" gap="100">
                <Icon size="400" src={preset.icon} />
                <Text size="T300" style={{ fontWeight: config.fontWeight.W600 }}>
                  {preset.label}
                </Text>
                <Text
                  size="T200"
                  priority="300"
                  style={{ textAlign: 'center', maxWidth: toRem(120) }}
                >
                  {preset.description}
                </Text>
              </Box>
            </Button>
          ))}
        </Box>
      </SequenceCard>
    </Box>
  );
}

type NotificationsProps = {
  requestClose: () => void;
};
export function Notifications({ requestClose }: NotificationsProps) {
  return (
    <Page>
      <PageHeader outlined={false}>
        <Box grow="Yes" gap="200">
          <Box grow="Yes" alignItems="Center" gap="200">
            <Text size="H3" truncate>
              Notifications
            </Text>
          </Box>
          <Box shrink="No">
            <IconButton onClick={requestClose} variant="Surface" aria-label="Close">
              <Icon src={Icons.Cross} />
            </IconButton>
          </Box>
        </Box>
      </PageHeader>
      <Box grow="Yes">
        <Scroll hideTrack visibility="Hover">
          <PageContent>
            <Box direction="Column" gap="700">
              <NotificationPresets />
              <SystemNotification />
              <AllMessagesNotifications />
              <SpecialMessagesNotifications />
              <KeywordMessagesNotifications />
              <PushRuleEditor />
              <Box direction="Column" gap="100">
                <Text size="L400">Block Messages</Text>
                <SequenceCard
                  className={SequenceCardStyle}
                  variant="SurfaceVariant"
                  direction="Column"
                  gap="400"
                >
                  <SettingTile description='This option has been moved to "Account > Block Users" section.' />
                </SequenceCard>
              </Box>
            </Box>
          </PageContent>
        </Scroll>
      </Box>
    </Page>
  );
}