strimertul/frontend/src/ui/pages/twitch/TwitchSettings/Page.tsx

import { CheckIcon } from '@radix-ui/react-icons';
import React from 'react';
import { useTranslation } from 'react-i18next';
import { useModule } from '~/lib/react';
import { useAppDispatch } from '~/store';
import { modules } from '~/store/api/reducer';
import {
  Checkbox,
  CheckboxIndicator,
  Field,
  FlexRow,
  Label,
  PageContainer,
  PageHeader,
  PageTitle,
  TabButton,
  TabContainer,
  TabContent,
  TabList,
  TextBlock,
} from '../../../theme';
import TwitchAPISettings from './TwitchAPISettings';
import TwitchEventSubSettings from './TwitchEventSubSettings';
import TwitchChatSettings from './TwitchChatSettings';

export default function TwitchSettingsPage(): React.ReactElement {
  const { t } = useTranslation();
  const [twitchConfig, setTwitchConfig] = useModule(modules.twitchConfig);
  const dispatch = useAppDispatch();

  const active = twitchConfig?.enabled ?? false;

  return (
    <PageContainer>
      <PageHeader>
        <PageTitle>{t('pages.twitch-settings.title')}</PageTitle>
        <TextBlock>{t('pages.twitch-settings.subtitle')}</TextBlock>
        <Field css={{ paddingTop: '1rem' }}>
          <FlexRow spacing={1}>
            <Checkbox
              checked={active}
              onCheckedChange={(ev) => {
                void dispatch(
                  setTwitchConfig({
                    ...twitchConfig,
                    enabled: !!ev,
                  }),
                );
              }}
              id="enable"
            >
              <CheckboxIndicator>{active && <CheckIcon />}</CheckboxIndicator>
            </Checkbox>

            <Label htmlFor="enable">{t('pages.twitch-settings.enable')}</Label>
          </FlexRow>
        </Field>
      </PageHeader>
      <div style={{ display: active ? '' : 'none' }}>
        <TabContainer defaultValue="api-config">
          <TabList>
            <TabButton value="api-config">
              {t('pages.twitch-settings.api-configuration')}
            </TabButton>
            <TabButton value="eventsub">
              {t('pages.twitch-settings.eventsub')}
            </TabButton>
            <TabButton value="chat-settings">
              {t('pages.twitch-settings.chat-settings')}
            </TabButton>
          </TabList>
          <TabContent value="api-config">
            <TwitchAPISettings />
          </TabContent>
          <TabContent value="eventsub">
            <TwitchEventSubSettings />
          </TabContent>
          <TabContent value="chat-settings">
            <TwitchChatSettings />
          </TabContent>
        </TabContainer>
      </div>
    </PageContainer>
  );
}