import { Button, Menu, NavLink, Select, Stack } 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';
import { useAtom } from 'jotai';
import { HomepageFilters } from '../../../contexts/HomepageFilters';

function SettingsButton() {
	const { data, isFetched } = useQueryAPI({ endpoint: 'api/appCategories' });
	const [categories, setCategories] = useState([{value: 'All', label: 'All'}]);
	const [homepageFilter, setHomepageFilter] = useAtom<object>(HomepageFilters);
	const classNames = {
		root: navLink.root,
		body: navLink.body,
		section: navLink.section,
		label: navLink.label,
		description: navLink.description,
		chevron: navLink.chevron,
	};
	
	useEffect(() => {
		if(data) {
			let 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
			withArrow
			shadow='md'
			position='top'
			classNames={{
				dropdown: menu.dropdown
			}}
			styles={{
				dropdown: {
					backgroundColor: 'var(--color-background)',
				},
			}}
		>
			<Menu.Target>
				<Button className={button.settingsButton} classNames={button}>
					<FiMenu />
				</Button>
			</Menu.Target>
			<Menu.Dropdown
				style={{
					position: 'absolute',
				}}
			>
				<NavLink
					label='Settings'
					component='a'
					href='/trigger/settings'
					classNames={classNames}
				/>
				<NavLink label='Quick Actions' classNames={classNames}>
					<NavLink
						label='Wake Dakota'
						leftSection={<FiMonitor />}
						onClick={() => runWakeCommand()}
						classNames={classNames}
					/>
				</NavLink>
				<Select
					label='Homepage Filter'
					data={categories ?? []}
					defaultValue={localStorage.getItem('contenttype')}
					withCheckIcon={false}
					onChange={(data: any) => {
						localStorage.setItem('contenttype', data || 'All');
						setHomepageFilter({value: data, label: data});
					}}
					className={selectClasses.filterSelect}
					classNames={selectClasses}
					styles={{
						label: {
							color: 'var(--color-text-pri)',
						},
					}}
				/>
			</Menu.Dropdown>
		</Menu>
	);
}

export default SettingsButton;