TriggerFrontend/src/pages/homepage/components/SettingsButton/SettingsButton.tsx

import { Box, Button, Group, Menu, Overlay, Stack } from '@mantine/core';
import { useCommonHooks, useMutationAPI, useQueryAPI } from 'hooks';
import { useEffect, useState } from 'react';
import { FiMenu, FiSettings } from 'react-icons/fi';
import { useNavigate } from 'react-router-dom';
import { buttonClasses, menuClasses } from 'styles';
import type { AppCategory, WolClient } from 'types';
import SettingsCard from './SettingsCard';
import ThemingCard from './ThemingCard';
import WakeOnLan from './WakeOnLanCard';

function SettingsButton() {
	const { data: appCategoryData, isFetched: appCategoryDataIsFetched } = useQueryAPI({
		endpoint: 'api/appCategories',
	});
	const { data: wolClientData, isFetched: wolClientDataIsFetched } = useQueryAPI({
		endpoint: 'api/wolClients',
	});
	const { data: wolEnabledData, isFetched: wolEnabledDataIsFetched } = useQueryAPI({
		endpoint: 'api/wolEnabled',
	});
	const [wolClients, setWolClients] = useState<WolClient[]>([]);
	const [enabled, setEnabled] = useState<number>(0);
	const { mutateAsync } = useMutationAPI();
	const [categories, setCategories] = useState([{ value: 'All', label: 'All' }]);
	const [selectedClient, setSelectedClient] = useState<WolClient>(wolClientData?.[0]);
	const navigate = useNavigate();
	const {
		theme,
		isMobile,
		appFilter,
		setAppFilter,
		appSort,
		setAppSort,
		appDensity,
		setAppDensity,
		appScale,
		setAppScale,
		bookmarkSort,
		setBookmarkSort,
		bookmarkFilter,
		setBookmarkFilter,
		bookmarkDensity,
		setBookmarkDensity,
		bookmarkScale,
		setBookmarkScale,
	} = useCommonHooks();

	const handleWakeRequest = () => {
		mutateAsync({
			method: 'POST',
			endpoint: 'api/wakeClient',
			body: selectedClient || wolClientData?.[0],
		});
	};

	useEffect(() => {
		if (appCategoryData) {
			const list: [any] = appCategoryData.map((category: AppCategory) => {
				return { value: category.filterName, label: category.filterName };
			});
			list.unshift({ value: 'All', label: 'All' });
			setCategories(list);
		}
	}, [appCategoryData, appCategoryDataIsFetched]);

	useEffect(() => {
		if (wolClientData && wolClientDataIsFetched) {
			setWolClients(wolClientData);
		}
	}, [wolClientData, wolClientDataIsFetched]);

	useEffect(() => {
		if (wolEnabledData && wolEnabledDataIsFetched) {
			setEnabled(wolEnabledData[0].enableWol);
		}
	}, [wolEnabledData, wolEnabledDataIsFetched]);
	return (
		<Menu
			classNames={menuClasses}
			width={isMobile ? '98%' : undefined}
			withArrow
			shadow='md'
			position='top'
			withOverlay
			overlayProps={{
				blur: 5,
			}}
		>
			<Menu.Target>
				<Button className={buttonClasses.settingsButton} classNames={buttonClasses}>
					<FiMenu />
				</Button>
			</Menu.Target>
			<Menu.Dropdown
				style={{
					backgroundColor:
						theme.backgroundImage.toLowerCase() !== 'none' &&
						theme.backgroundImage !== undefined
							? 'transparent'
							: 'var(--mantine-color-background-0)',
				}}
			>
				<Group p={'1rem'} gap={12}>
					<Stack
						style={{
							flexDirection: isMobile ? 'row' : 'column',
							width: isMobile ? '100%' : undefined,
						}}
					>
						{enabled === 1 && (
							<Box
								pos={'relative'}
								style={{ filter: wolClients.length === 0 ? 'grayscale(1)' : undefined }}
							>
								{wolClients.length === 0 && (
									<Overlay opacity={0.75} style={{ borderRadius: '10px' }} />
								)}
								<WakeOnLan
									wolClients={wolClients}
									selectedClient={selectedClient}
									setSelectedClient={setSelectedClient}
									handleWakeRequest={handleWakeRequest}
								/>
							</Box>
						)}
						<ThemingCard wolEnabled={enabled} />
					</Stack>
					<Stack>
						<SettingsCard
							categories={categories}
							sectionTitle={'Applications'}
							filter={appFilter}
							setFilter={setAppFilter}
							sort={appSort}
							setSort={setAppSort}
							density={appDensity}
							setDensity={setAppDensity}
							scale={appScale}
							setScale={setAppScale}
						/>
						<SettingsCard
							categories={categories}
							sectionTitle={'Bookmarks'}
							filter={bookmarkFilter}
							setFilter={setBookmarkFilter}
							sort={bookmarkSort}
							setSort={setBookmarkSort}
							density={bookmarkDensity}
							setDensity={setBookmarkDensity}
							scale={bookmarkScale}
							setScale={setBookmarkScale}
						/>
					</Stack>
				</Group>
				<Group mt={'-.75rem'} justify='center'>
					<Button
						leftSection={<FiSettings />}
						onClick={() => navigate(`/${import.meta.env.VITE_BASE_URL}/settings`)}
						className={buttonClasses.settingsMenuButton}
						classNames={buttonClasses}
					>
						Settings
					</Button>
				</Group>
			</Menu.Dropdown>
		</Menu>
	);
}

export default SettingsButton;