import {
	ActionIcon,
	Button,
	type ComboboxItem,
	Group,
	Menu,
	MultiSelect,
	Overlay,
	Select,
	Slider,
	Stack,
	Text,
	Tooltip,
} from '@mantine/core';
import { useQueryClient } from '@tanstack/react-query';
import { useCommonHooks, useMutationAPI, useQueryAPI } from 'hooks';
import { useEffect, useState } from 'react';
import { FaDice, FaSync } 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,
	sliderClasses,
	stackClasses,
} from 'styles';
import type { AppCategory, Theme, ThemePlaylist, WolClient } from 'types';

function SettingsButton() {
	const { data: appCategoryData, isFetched: appCategoryDataIsFetched } = useQueryAPI({
		endpoint: 'api/appCategories',
	});
	const { data: wolClientData, isFetched: wolClientDataIsFetched } = useQueryAPI({
		endpoint: 'api/wolClients',
	});
	const [wolClients, setWolClients] = useState<WolClient[]>([]);
	const { data: allThemeData, isFetched: allThemeDataIsFetched } = useQueryAPI({
		endpoint: 'api/themes',
	});
	const { data: themePlaylistData } = useQueryAPI({
		endpoint: 'api/themePlaylists',
	});
	const { mutateAsync } = useMutationAPI();
	const [allThemes, setAllThemes] = useState<Theme[]>([]);
	const [categories, setCategories] = useState([{ value: 'All', label: 'All' }]);
	const [selectedClient] = useState<WolClient>(wolClientData?.[0]);
	const [overlayOpened, setOverlayOpened] = useState(false);
	const navigate = useNavigate();
	const notify = (notification: any) => toast(notification, { position: 'bottom-right' });
	const {
		currentTheme,
		setCurrentTheme,
		setThemeName,
		handleThemeChange,
		theme,
		appFilter,
		setAppFilter,
		appSort,
		setAppSort,
		appDensity,
		setAppDensity,
		bookmarkSort,
		setBookmarkSort,
		bookmarkFilter,
		setBookmarkFilter,
		bookmarkDensity,
		setBookmarkDensity,
		isMobile,
		currentThemePlaylist,
		setCurrentThemePlaylist,
	} = useCommonHooks();
	const handleWakeRequest = () => {
		mutateAsync({
			method: 'POST',
			endpoint: 'api/wakeClient',
			body: selectedClient || wolClientData?.[0],
		});
	};

	const queryClient = useQueryClient();

	const handleRefresh = () => {
		queryClient.refetchQueries();
	};

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

	useEffect(() => {
		if (wolClientData && wolClientDataIsFetched) {
			setWolClients(wolClientData);
		}
	}, [wolClientData, wolClientDataIsFetched]);

	useEffect(() => {
		if (allThemeData && allThemeDataIsFetched) {
			setAllThemes(allThemeData);
		}
	}, [allThemeData, allThemeDataIsFetched]);
	return (
		<>
			{overlayOpened && <Overlay pos={'fixed'} />}
			<Menu
				classNames={menuClasses}
				width={isMobile ? '98%' : 'auto'}
				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
					style={{
						backgroundColor:
							theme.backgroundImage.toLowerCase() !== 'none' &&
							theme.backgroundImage !== undefined
								? 'transparent'
								: 'var(--mantine-color-background-0)',
					}}
				>
					<Group p={'1rem'} gap={12}>
						<Stack display={'flex'} align='center'>
							<Stack
								gap={0}
								align='center'
								className={stackClasses.menuStack}
								classNames={stackClasses}
								style={{ aspectRatio: '1/1' }}
							>
								<Menu.Label>Wake on LAN</Menu.Label>
								<Button
									classNames={buttonClasses}
									className={buttonClasses.wakeButton}
									disabled={!wolClients?.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={wolClients?.[0]?.hostname}
									data={
										wolClients
											?.map((wolClient: WolClient) => {
												return {
													value: wolClient.hostname,
													label: `${wolClient.hostname} (${wolClient.macAddress})`,
													hostname: wolClient.hostname,
													macAddress: wolClient.macAddress,
												};
											})
											.toSorted((a: ComboboxItem, b: ComboboxItem) =>
												a.label.localeCompare(b.label),
											) ?? []
									}
									w='92%'
									classNames={{
										input: selectClasses.menuSelectInput,
										label: selectClasses.menuSelectLabel,
										options: selectClasses.menuSelectOptions,
										option: selectClasses.menuSelectOption,
									}}
									comboboxProps={{
										withinPortal: false,
										width: 'fit-content',
									}}
								/>
							</Stack>
							<Stack
								gap={0}
								align='center'
								className={stackClasses.menuStack}
								classNames={stackClasses}
								style={{ aspectRatio: '1/1' }}
							>
								<Menu.Label pb={'.25rem'}>Themes</Menu.Label>
								<Group mt={'-1.5rem'} mb={'-.25rem'} w={'95%'} justify='space-between'>
									<Tooltip
										label='Shuffle Themes'
										color={'var(--mantine-color-primary-0)'}
										withArrow
									>
										<ActionIcon
											className={actionIconClasses.menuActions}
											classNames={actionIconClasses}
											style={{
												backgroundColor:
													currentTheme === 'random'
														? `${theme?.searchColor === theme?.primaryColor ? theme.searchColor?.substring(0, 7) : theme.primaryColor?.substring(0, 7)}88`
														: 'transparent',
												color:
													currentTheme === 'random'
														? 'var(--mantine-color-accent-0)'
														: 'var(--mantine-color-primary-0)',
											}}
											onClick={() => {
												setCurrentTheme(
													currentTheme === 'random' ? theme.name : 'random',
												);
												setCurrentThemePlaylist('All');
											}}
										>
											<FiShuffle />
										</ActionIcon>
									</Tooltip>
									<Tooltip
										label='Random Theme'
										color={'var(--mantine-color-primary-0)'}
										withArrow
									>
										<ActionIcon
											className={actionIconClasses.menuActions}
											classNames={actionIconClasses}
											style={{
												backgroundColor: 'transparent',
												color: 'var(--mantine-color-primary-0)',
											}}
											onClick={() => {
												setCurrentThemePlaylist('All');
												handleThemeChange(allThemes, true);
											}}
										>
											<FaDice />
										</ActionIcon>
									</Tooltip>
								</Group>
								<Text fw={'bold'} fz={18}>
									Currently:{' '}
								</Text>
								{theme.name}
								<Text fw={'bold'} fz={18}>
									Playlist:{' '}
								</Text>
								<Select
									labelProps={{ display: 'none' }}
									placeholder='Pick a playlist...'
									value={currentThemePlaylist}
									data={
										themePlaylistData
											?.map((playlist: ThemePlaylist) => {
												return {
													value: playlist.name,
													label: playlist.name,
												};
											})
											.toSorted((a: ComboboxItem, b: ComboboxItem) =>
												a.label.localeCompare(b.label),
											) ?? []
									}
									w='92%'
									classNames={{
										input: selectClasses.menuSelectInput,
										label: selectClasses.menuSelectLabel,
										options: selectClasses.menuSelectOptions,
										option: selectClasses.menuSelectOption,
									}}
									comboboxProps={{
										withinPortal: false,
										width: 'fit-content',
									}}
									onChange={(_value, option: ComboboxItem) => {
										setCurrentThemePlaylist(option.value);
										if (option.value !== 'Time of Day') {
											setThemeName('random');
										} else {
											const themeList = JSON.parse(
												themePlaylistData.find(
													(t: ThemePlaylist) => t.name === 'Time of Day',
												).themeList,
											);
											setThemeName(
												allThemeData.find(
													(t: Theme) =>
														t.id ===
														Number(themeList[Math.floor(new Date().getHours() / 6)]),
												).name,
											);
										}
									}}
								/>
							</Stack>
						</Stack>
						<Stack display={'flex'} align='center'>
							<Stack
								gap={0}
								align='center'
								justify='space-between'
								className={stackClasses.menuStack}
								classNames={stackClasses}
								pos={'relative'}
							>
								<Text
									style={{
										fontSize: 12,
										paddingLeft: 8,
										paddingRight: 8,
										paddingTop: 2,
										paddingBottom: 2,
										borderRadius: 8,
										position: 'absolute',
										left: '-12px',
										top: '-8px',
										backgroundColor: 'var(--mantine-color-primary-0)',
										color: 'var(--mantine-color-background-0)',
									}}
								>
									Apps
								</Text>
								<Text fz={14} mt={16}>
									Density
								</Text>
								<Stack m={0} p={0} gap={0} w={'90%'}>
									<Slider
										className={sliderClasses.default}
										classNames={sliderClasses}
										restrictToMarks
										value={appDensity}
										onChange={(value) => setAppDensity(value)}
										min={1}
										max={8}
									/>
								</Stack>
								<Group justify='center' mb={'.25rem'}>
									<MultiSelect
										label='Filter'
										data={
											categories.toSorted((a: ComboboxItem, b: ComboboxItem) =>
												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: string[]) => {
											setAppFilter(data);
										}}
										classNames={multiSelectClasses}
										comboboxProps={{
											withinPortal: false,
										}}
									/>
									<Select
										label={'Sorting'}
										placeholder='Sort Applications...'
										value={appSort}
										data={['Custom', 'A>Z', 'Z>A', 'Newest', 'Oldest']}
										classNames={{
											input: selectClasses.menuSelectInput,
											label: selectClasses.menuSelectLabel,
											options: selectClasses.menuSelectOptions,
											option: selectClasses.menuSelectOption,
										}}
										comboboxProps={{
											withinPortal: false,
										}}
										onChange={(_value, option: ComboboxItem) => {
											setAppSort(option.value);
										}}
									/>
								</Group>
							</Stack>
							<Stack
								gap={0}
								align='center'
								justify='space-between'
								className={stackClasses.menuStack}
								classNames={stackClasses}
								pos={'relative'}
							>
								<Text
									style={{
										fontSize: 12,
										paddingLeft: 8,
										paddingRight: 8,
										paddingTop: 2,
										paddingBottom: 2,
										borderRadius: 8,
										position: 'absolute',
										left: '-12px',
										top: '-8px',
										backgroundColor: 'var(--mantine-color-primary-0)',
										color: 'var(--mantine-color-background-0)',
									}}
								>
									Bookmarks
								</Text>
								<Text fz={14} mt={16}>
									Density
								</Text>
								<Stack m={0} p={0} gap={0} w={'90%'}>
									<Slider
										className={sliderClasses.default}
										classNames={sliderClasses}
										restrictToMarks
										value={bookmarkDensity}
										onChange={(value) => setBookmarkDensity(value)}
										min={1}
										max={8}
									/>
								</Stack>
								<Group justify='center' mb={'.25rem'}>
									<MultiSelect
										label='Filter'
										data={
											categories.toSorted((a: ComboboxItem, b: ComboboxItem) =>
												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: string[]) => {
											setBookmarkFilter(data);
										}}
										classNames={multiSelectClasses}
										comboboxProps={{
											withinPortal: false,
										}}
									/>
									<Select
										label={'Sorting'}
										placeholder='Sort Bookmarks...'
										value={bookmarkSort}
										data={['Custom', 'A>Z', 'Z>A', 'Newest', 'Oldest']}
										classNames={{
											input: selectClasses.menuSelectInput,
											label: selectClasses.menuSelectLabel,
											options: selectClasses.menuSelectOptions,
											option: selectClasses.menuSelectOption,
										}}
										comboboxProps={{
											withinPortal: false,
										}}
										onChange={(_value, option: ComboboxItem) => {
											setBookmarkSort(option.value);
										}}
									/>
								</Group>
							</Stack>
						</Stack>
					</Group>
					<Group mt={'-.75rem'} w={'100%'} align='center' justify='center'>
						<Button
							leftSection={<FiSettings />}
							onClick={() => navigate(`/${import.meta.env.VITE_BASE_URL}/settings`)}
							className={buttonClasses.settingsMenuButton}
							classNames={buttonClasses}
						>
							Settings
						</Button>
						<Button
							leftSection={<FaSync />}
							onClick={handleRefresh}
							className={buttonClasses.settingsMenuButton}
							classNames={buttonClasses}
						>
							Refresh
						</Button>
					</Group>
				</Menu.Dropdown>
			</Menu>
		</>
	);
}

export default SettingsButton;