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

function SettingsButton({
	appFilter,
	setAppFilter,
	bookmarkFilter,
	setBookmarkFilter,
}: any) {
	const { data, isFetched } = useQueryAPI({ endpoint: 'api/appCategories' });
	const [categories, setCategories] = useState([{ value: 'All', label: 'All' }]);
	const navigate = useNavigate();
	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]);

	function runWakeCommand() {
		const requestOptions = {
			method: 'GET',
			headers: { 'Content-Type': 'application/json' },
		};
		fetch(`/${import.meta.env.VITE_BASE_URL}/api/wakeDakota`, requestOptions);
	}
	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>
				<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;