import { Button, Menu, MultiSelect, NavLink, Switch } from '@mantine/core';
import { runWakeCommand, useCommonHooks, useQueryAPI } from 'hooks';
import { useEffect, useState } from 'react';
import { FiMenu, FiMonitor, FiShuffle } from 'react-icons/fi';
import { useNavigate } from 'react-router-dom';
import { buttonClasses, menuClasses, navLinkClasses, selectClasses } from 'styles';

function SettingsButton() {
	const { data, isFetched } = useQueryAPI({ endpoint: 'api/appCategories' });
	const [categories, setCategories] = useState([{ value: 'All', label: 'All' }]);
	const navigate = useNavigate();
	const {
		currentTheme,
		setCurrentTheme,
		handleThemeChange,
		theme,
		allThemes,
		appFilter,
		setAppFilter,
		bookmarkFilter,
		setBookmarkFilter,
	} = useCommonHooks();

	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]);

	return (
		<Menu withinPortal={false} withArrow shadow='md' position='top'>
			<Menu.Target>
				<Button className={buttonClasses.settingsButton} classNames={buttonClasses}>
					<FiMenu />
				</Button>
			</Menu.Target>
			<Menu.Dropdown className={menuClasses.dropdown}>
				<NavLink
					label='Settings'
					component='a'
					className={navLinkClasses.defaultNavLink}
					classNames={navLinkClasses}
					onClick={() => navigate(`/${import.meta.env.VITE_BASE_URL}/settings`)}
				/>
				<NavLink
					label='Quick Actions'
					className={navLinkClasses.defaultNavLink}
					classNames={navLinkClasses}
				>
					<NavLink
						label='Wake Dakota'
						leftSection={<FiMonitor />}
						onClick={() => runWakeCommand()}
						className={navLinkClasses.defaultNavLink}
						classNames={navLinkClasses}
					/>
					<NavLink
						label='Shuffle Themes'
						leftSection={
							<Switch
								labelPosition='left'
								checked={currentTheme === 'random'}
								onChange={(e) => {
									setCurrentTheme(e.target.checked ? 'random' : theme.name);
								}}
								color={theme.primaryColor}
							/>
						}
						onClick={() => {}}
						className={navLinkClasses.defaultNavLink}
						classNames={navLinkClasses}
					/>
					<NavLink
						label='Random Theme'
						leftSection={<FiShuffle />}
						onClick={() => {
							handleThemeChange(allThemes, true);
						}}
						className={navLinkClasses.defaultNavLink}
						classNames={navLinkClasses}
					/>
				</NavLink>
				<MultiSelect
					label='App Filter'
					data={categories ?? []}
					defaultValue={appFilter}
					withCheckIcon={false}
					onChange={(data: any) => {
						setAppFilter(data);
					}}
					classNames={selectClasses}
					comboboxProps={{ withinPortal: false }}
				/>
				<MultiSelect
					label='Bookmark Filter'
					data={categories ?? []}
					defaultValue={bookmarkFilter}
					withCheckIcon={false}
					onChange={(data: any) => {
						setBookmarkFilter(data);
					}}
					classNames={selectClasses}
					comboboxProps={{ withinPortal: false }}
				/>
			</Menu.Dropdown>
		</Menu>
	);
}

export default SettingsButton;