import { Button, Menu, NavLink, Select } from '@mantine/core';
import { useEffect, useState } from 'react';
import { FiMenu, FiMonitor } from 'react-icons/fi';
import {useQueryAPI} from '../../../hooks/useAPI';
import button from '../../../styles/Button.module.css';
import menu from '../../../styles/Menu.module.css';
import navLink from '../../../styles/NavLink.module.css';
import selectClasses from '../../../styles/Select.module.css';

function SettingsButton({contentType, setContentType, theme}: any) {
	const { data, isFetched } = useQueryAPI({ endpoint: 'api/appCategories' });
	const [categories, setCategories] = useState([{value: 'All', label: 'All'}]);
	
	useEffect(() => {
		if(data) {
			const list: [any] = data.map((category: any) => {return {value: category.category, label: category.category}}) || [];
			list.unshift({value: 'All', label: 'All'});
			setCategories(list);
		}
	}, [data, isFetched]);

	function runWakeCommand() {
		const requestOptions = {
			method: 'GET',
			headers: { 'Content-Type': 'application/json' },
		};
		fetch('/trigger/api/wakeDakota', requestOptions);
	}
	return (
		<Menu
			withinPortal={false}
			withArrow
			shadow='md'
			position='top'
		>
			<Menu.Target>
				<Button className={button.settingsButton} classNames={button}>
					<FiMenu />
				</Button>
			</Menu.Target>
			<Menu.Dropdown
				className={menu.dropdown}
			>
				<NavLink
					label='Settings'
					component='a'
					href='/trigger/settings'
					className={navLink.defaultNavLink}
					classNames={navLink}
				/>
				<NavLink label='Quick Actions'
					className={navLink.defaultNavLink}
					classNames={navLink}>
					<NavLink
						label='Wake Dakota'
						leftSection={<FiMonitor />}
						onClick={() => runWakeCommand()}
						className={navLink.defaultNavLink}
						classNames={navLink}
					/>
				</NavLink>
				<Select
					label='Homepage Filter'
					data={categories ?? []}
					defaultValue={contentType}
					withCheckIcon={false}
					onChange={(data: any) => {
						setContentType(data)
					}}
					classNames={selectClasses}
					comboboxProps={{ withinPortal: false }}
				/>
			</Menu.Dropdown>
		</Menu>
	);
}

export default SettingsButton;