TriggerFrontend/src/pages/settings/Settings.tsx

import { ActionIcon, Divider, Group, ScrollArea, Stack, Tabs, Text } from '@mantine/core';
import { useCommonHooks, useQueryAPI } from 'hooks';
import { FaPaintBrush, FaRegListAlt } from 'react-icons/fa';
import {
	FiArrowLeftCircle,
	FiBookmark,
	FiGlobe,
	FiMail,
	FiMonitor,
	FiSearch,
	FiUser,
} from 'react-icons/fi';
import { useNavigate, useParams } from 'react-router-dom';
import { actionIconClasses, scrollAreaClasses, tabClasses, textClasses } from 'styles';
import type { PersonalData } from 'types';
import {
	Applications,
	Bookmarks,
	GuacamoleClients,
	Messages,
	Personalization,
	SearchHistory,
	SearchProviders,
	ThemePlaylists,
	Themes,
	WolClients,
} from './components';

export function Settings() {
	const endpoint = 'api/personalData';
	const { data: personalData } = useQueryAPI({
		endpoint: endpoint,
	});
	const personal: PersonalData = personalData?.[0];
	const { isMobile, theme } = useCommonHooks();
	const navigate = useNavigate();
	const { tabValue } = useParams();

	return (
		<Stack h={'100%'} gap={0}>
			<Group gap={0} style={{ position: 'relative', paddingBottom: '1rem' }}>
				<ActionIcon
					className={actionIconClasses.backButton}
					classNames={actionIconClasses}
					component='a'
					onClick={() => navigate(`/${import.meta.env.VITE_BASE_URL}`)}
				>
					<FiArrowLeftCircle />
				</ActionIcon>
				<Text
					className={textClasses.settingsTitle}
					classNames={textClasses}
					style={{
						boxShadow:
							theme.textShadowsEnabled === 1
								? '4px -4px color-mix(in srgb, var(--mantine-color-border-0), transparent 50%)'
								: undefined,
					}}
				>
					Settings
				</Text>
			</Group>
			<Tabs
				orientation={isMobile ? 'horizontal' : 'vertical'}
				defaultValue={tabValue ?? 'personalization'}
				className={tabClasses.settingsTabs}
				classNames={tabClasses}
				keepMounted={false}
				value={tabValue}
				h={isMobile ? undefined : '100%'}
				onChange={(value) =>
					navigate(`/${import.meta.env.VITE_BASE_URL}/settings/${value}`)
				}
			>
				<Tabs.List style={{ justifyContent: isMobile ? 'space-between' : undefined }}>
					<Tabs.Tab px={isMobile ? '.9rem' : undefined} value='personalization'>
						{isMobile ? <FiUser /> : 'Personal Info'}
					</Tabs.Tab>
					{!isMobile && (
						<Group w={'100%'} gap={0} justify='center'>
							<Divider
								label='Homepage Items'
								w={'90%'}
								h={3}
								mb={'1rem'}
								color={'var(--mantine-color-primary-0)'}
								variant='dashed'
								labelPosition='center'
								styles={{
									label: {
										color: 'var(--mantine-color-accent-0)',
									},
								}}
							/>
						</Group>
					)}
					<Tabs.Tab px={isMobile ? '.9rem' : undefined} value='messages'>
						{isMobile ? <FiMail /> : 'Messages'}
					</Tabs.Tab>
					<Tabs.Tab px={isMobile ? '.9rem' : undefined} value='applications'>
						{isMobile ? <FiGlobe /> : 'Applications'}
					</Tabs.Tab>
					<Tabs.Tab px={isMobile ? '.9rem' : undefined} value='bookmarks'>
						{isMobile ? <FiBookmark /> : 'Bookmarks'}
					</Tabs.Tab>
					{!isMobile && (
						<Group w={'100%'} gap={0} justify='center'>
							<Divider
								label='Theming'
								w={'90%'}
								h={3}
								mb={'1rem'}
								color={'var(--mantine-color-primary-0)'}
								variant='dashed'
								labelPosition='center'
								styles={{
									label: {
										color: 'var(--mantine-color-accent-0)',
									},
								}}
							/>
						</Group>
					)}
					<Tabs.Tab px={isMobile ? '.9rem' : undefined} value='themes'>
						{isMobile ? <FaPaintBrush /> : 'Themes'}
					</Tabs.Tab>
					<Tabs.Tab px={isMobile ? '.9rem' : undefined} value='themePlaylists'>
						{isMobile ? <FaRegListAlt /> : 'Theme Playlists'}
					</Tabs.Tab>
					{!isMobile && (
						<Group w={'100%'} gap={0} justify='center'>
							<Divider
								label='Search'
								w={'90%'}
								h={3}
								mb={'1rem'}
								color={'var(--mantine-color-primary-0)'}
								variant='dashed'
								labelPosition='center'
								styles={{
									label: {
										color: 'var(--mantine-color-accent-0)',
									},
								}}
							/>
						</Group>
					)}
					<Tabs.Tab px={isMobile ? '.9rem' : undefined} value='providers'>
						{isMobile ? <FiSearch /> : 'Search Providers'}
					</Tabs.Tab>
					<Tabs.Tab px={isMobile ? '.9rem' : undefined} value='history'>
						{isMobile ? <FiSearch /> : 'Search History'}
					</Tabs.Tab>
					{!isMobile && (personal?.enableWol || personal?.enableGuacamole) ? (
						<Group w={'100%'} gap={0} justify='center'>
							<Divider
								label='Extras'
								w={'90%'}
								h={3}
								mb={'1rem'}
								color={'var(--mantine-color-primary-0)'}
								variant='dashed'
								labelPosition='center'
								styles={{
									label: {
										color: 'var(--mantine-color-accent-0)',
									},
								}}
							/>
						</Group>
					) : null}
					{personal?.enableWol ? (
						<Tabs.Tab px={isMobile ? '.9rem' : undefined} value='wolClients'>
							{isMobile ? <FiMonitor /> : 'WoL Clients'}
						</Tabs.Tab>
					) : null}
					{personal?.enableGuacamole ? (
						<Tabs.Tab px={isMobile ? '.9rem' : undefined} value='guacamoleClients'>
							{isMobile ? <FiMonitor /> : 'Guacamole Clients'}
						</Tabs.Tab>
					) : null}
				</Tabs.List>
				<Tabs.Panel value='personalization'>
					<ScrollArea
						className={scrollAreaClasses.default}
						classNames={scrollAreaClasses}
					>
						<Personalization />
					</ScrollArea>
				</Tabs.Panel>
				<Tabs.Panel value='messages'>
					<ScrollArea
						className={scrollAreaClasses.default}
						classNames={scrollAreaClasses}
					>
						<Messages />
					</ScrollArea>
				</Tabs.Panel>
				<Tabs.Panel value='applications'>
					<ScrollArea
						className={scrollAreaClasses.default}
						classNames={scrollAreaClasses}
					>
						<Applications />
					</ScrollArea>
				</Tabs.Panel>
				<Tabs.Panel value='bookmarks'>
					<ScrollArea
						className={scrollAreaClasses.default}
						classNames={scrollAreaClasses}
					>
						<Bookmarks />
					</ScrollArea>
				</Tabs.Panel>
				<Tabs.Panel value='themes'>
					<ScrollArea
						className={scrollAreaClasses.default}
						classNames={scrollAreaClasses}
					>
						<Themes />
					</ScrollArea>
				</Tabs.Panel>
				<Tabs.Panel value='themePlaylists'>
					<ScrollArea
						className={scrollAreaClasses.default}
						classNames={scrollAreaClasses}
					>
						<ThemePlaylists />
					</ScrollArea>
				</Tabs.Panel>
				<Tabs.Panel value='providers'>
					<ScrollArea
						className={scrollAreaClasses.default}
						classNames={scrollAreaClasses}
					>
						<SearchProviders />
					</ScrollArea>
				</Tabs.Panel>
				<Tabs.Panel value='history'>
					<ScrollArea
						className={scrollAreaClasses.default}
						classNames={scrollAreaClasses}
					>
						<SearchHistory />
					</ScrollArea>
				</Tabs.Panel>
				{personal?.enableWol ? (
					<Tabs.Panel value='wolClients'>
						<ScrollArea
							className={scrollAreaClasses.default}
							classNames={scrollAreaClasses}
						>
							<WolClients />
						</ScrollArea>
					</Tabs.Panel>
				) : null}
				{personal?.enableGuacamole ? (
					<Tabs.Panel value='guacamoleClients'>
						<ScrollArea
							className={scrollAreaClasses.default}
							classNames={scrollAreaClasses}
						>
							<GuacamoleClients />
						</ScrollArea>
					</Tabs.Panel>
				) : null}
			</Tabs>
		</Stack>
	);
}
export default Settings;