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

import {
	ActionIcon,
	Button,
	Group,
	Menu,
	MultiSelect,
	Overlay,
	Select,
	Stack,
	Text,
	Tooltip,
} from '@mantine/core';
import { useCommonHooks, useMutationAPI, useQueryAPI } from 'hooks';
import { useEffect, useState } from 'react';
import { FaDice } from 'react-icons/fa';
import { FiMenu, FiPower, FiSettings, FiShuffle } from 'react-icons/fi';
import { useNavigate } from 'react-router-dom';
import { toast } from 'react-toastify';
import {
	actionIconClasses,
	buttonClasses,
	menuClasses,
	multiSelectClasses,
	selectClasses,
	stackClasses,
} from 'styles';

function SettingsButton() {
	const { data, isFetched } = useQueryAPI({ endpoint: 'api/appCategories' });
	const { data: wolClients, isFetched: wolClientsIsFetched } = useQueryAPI({
		endpoint: 'api/wolClients',
	});
	const [wolClientsData, setWolClientsData] = useState<any>([]);
	const { data: allThemes, isFetched: isAllThemesFetched } = useQueryAPI({
		endpoint: 'api/themes',
	});

	const { mutateAsync: wakeRequest } = useMutationAPI();
	const [allThemeData, setAllThemeData] = useState<any>([]);
	const [categories, setCategories] = useState([{ value: 'All', label: 'All' }]);
	const [selectedClient, setSelectedClient] = useState<any>(wolClients?.[0]);
	const [overlayOpened, setOverlayOpened] = useState(false);
	const navigate = useNavigate();
	const notify = (notification: any) => toast(notification, { position: 'bottom-right' });
	const {
		currentTheme,
		setCurrentTheme,
		handleThemeChange,
		theme,
		appFilter,
		setAppFilter,
		bookmarkFilter,
		setBookmarkFilter,
		isMobile,
	} = useCommonHooks();

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

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

	useEffect(() => {
		if (wolClients && wolClientsIsFetched) {
			setWolClientsData(wolClients);
		}
	}, [wolClients, wolClientsIsFetched]);

	useEffect(() => {
		if (allThemes && isAllThemesFetched) {
			setAllThemeData(allThemes);
		}
	}, [allThemes, isAllThemesFetched]);

	return (
		<>
			{overlayOpened && <Overlay pos={'fixed'} />}
			<Menu
				classNames={menuClasses}
				width={isMobile ? '98%' : '500px'}
				withinPortal={false}
				withArrow
				shadow='md'
				position='top'
				onOpen={() => setOverlayOpened(true)}
				onClose={() => setOverlayOpened(false)}
			>
				<Menu.Target>
					<Button className={buttonClasses.settingsButton} classNames={buttonClasses}>
						<FiMenu />
					</Button>
				</Menu.Target>
				<Menu.Dropdown>
					<Stack gap={0} display={'flex'} pb={'1rem'} pt={'2rem'} align='center'>
						<Tooltip label='Settings' color={theme.primaryColor} withArrow>
							<FiSettings
								size={20}
								onClick={() => navigate(`/${import.meta.env.VITE_BASE_URL}/settings`)}
								style={{
									cursor: 'pointer',
									position: 'absolute',
									top: '.5rem',
									right: '.5rem',
								}}
							/>
						</Tooltip>
						<Group w={'100%'} justify='center'>
							<Stack
								gap={0}
								align='center'
								className={stackClasses.menuStack}
								classNames={stackClasses}
							>
								<Menu.Label>Wake on LAN</Menu.Label>
								<Button
									classNames={buttonClasses}
									className={buttonClasses.wakeButton}
									disabled={!wolClientsData?.length || selectedClient === null}
									onClick={() => {
										handleWakeRequest();
										notify('Wake command sent');
									}}
								>
									<Stack gap={0} align='center'>
										<FiPower size={32} />
									</Stack>
								</Button>
								<Select
									labelProps={{ display: 'none' }}
									placeholder='Pick a host...'
									defaultValue={wolClientsData?.[0]?.hostname}
									data={
										wolClientsData
											?.map((wolClient: any) => {
												return {
													value: wolClient.hostname,
													label: `${wolClient.hostname} (${wolClient.macAddress})`,
													hostname: wolClient.hostname,
													macAddress: wolClient.macAddress,
												};
											})
											.toSorted((a: any, b: any) => a.label.localeCompare(b.label)) || []
									}
									w='92%'
									classNames={selectClasses}
									className={selectClasses.default}
									comboboxProps={{ withinPortal: false }}
									onChange={(_value, option: any) => setSelectedClient(option)}
									onLoad={(option: any) => setSelectedClient(option)}
								/>
							</Stack>
							<Stack
								gap={0}
								align='center'
								className={stackClasses.menuStack}
								classNames={stackClasses}
							>
								<Menu.Label pb={'1rem'}>Themes</Menu.Label>
								<Group pb={'1rem'}>
									<Tooltip label='Shuffle Themes' color={theme.primaryColor} withArrow>
										<ActionIcon
											className={actionIconClasses.menuActions}
											classNames={actionIconClasses}
											style={{
												backgroundColor:
													currentTheme === 'random'
														? `${theme.primaryColor}88`
														: 'transparent',
												color:
													currentTheme === 'random'
														? theme.accentColor
														: theme.primaryColor,
											}}
											onClick={() => {
												setCurrentTheme(
													currentTheme === 'random' ? theme.name : 'random',
												);
											}}
										>
											<FiShuffle />
										</ActionIcon>
									</Tooltip>
									<Tooltip label='Random Theme' color={theme.primaryColor} withArrow>
										<ActionIcon
											className={actionIconClasses.menuActions}
											classNames={actionIconClasses}
											style={{
												backgroundColor: 'transparent',
												color: theme.primaryColor,
											}}
											onClick={() => {
												handleThemeChange(allThemeData, true);
											}}
										>
											<FaDice />
										</ActionIcon>
									</Tooltip>
								</Group>
								<Text fw={'bold'} fz={20}>
									Currently:{' '}
								</Text>
								{theme.name}
							</Stack>
						</Group>
						<Menu.Divider
							w={'85%'}
							m={'.75rem'}
							style={{ borderColor: theme.accentColor }}
						/>
						<Stack
							gap={0}
							align='center'
							w={'85%'}
							h={'100px'}
							className={stackClasses.menuStack}
							classNames={stackClasses}
						>
							<Menu.Label>Filters</Menu.Label>
							<Group justify='space-between' px={'.5rem'}>
								<MultiSelect
									label='Apps'
									data={
										categories.toSorted((a: any, b: any) =>
											a.label.localeCompare(b.label),
										) ?? []
									}
									placeholder={
										appFilter.length > 0
											? appFilter.length === 1
												? appFilter[0]
												: `${appFilter.length} apps selected`
											: 'No apps selected'
									}
									defaultValue={appFilter}
									onChange={(data: any) => {
										setAppFilter(data);
									}}
									classNames={multiSelectClasses}
									comboboxProps={{ withinPortal: false }}
								/>
								<MultiSelect
									label='Bookmarks'
									data={
										categories.toSorted((a: any, b: any) =>
											a.label.localeCompare(b.label),
										) ?? []
									}
									placeholder={
										bookmarkFilter.length > 0
											? bookmarkFilter.length === 1
												? bookmarkFilter[0]
												: `${bookmarkFilter.length} bookmarks selected`
											: 'No bookmarks selected'
									}
									defaultValue={bookmarkFilter}
									onChange={(data: any) => {
										setBookmarkFilter(data);
									}}
									classNames={multiSelectClasses}
									comboboxProps={{ withinPortal: false }}
								/>
							</Group>
						</Stack>
					</Stack>
				</Menu.Dropdown>
			</Menu>
		</>
	);
}

export default SettingsButton;