import {
	Button,
	Divider,
	Grid,
	GridCol,
	Group,
	Popover,
	Stack,
	TextInput,
} from '@mantine/core';
import { useDebouncedValue, useDisclosure } from '@mantine/hooks';
import { useCommonHooks, useMutationAPI, useQueryAPI } from 'hooks';
import { useEffect, useState } from 'react';
import { popoverClasses, textInputClasses } from 'styles';
import type { WolClient } from 'types';
import AddItemModal from '../Shared/AddItemModal';
import SettingsHeader from '../Shared/SettingsHeader';
import DebouncedWolClient from './DebouncedWolClient';
import WolClientSettingsItem from './WolClientSettingsItem';

const WolClientSettings = () => {
	const defaultWolClient: WolClient = {
		id: undefined,
		hostname: '',
		macAddress: '',
	};
	const endpoint = 'api/wolClients';
	const { data: wolClientsData, isFetched: wolClientsIsFetched } = useQueryAPI({
		endpoint: endpoint,
	});
	const [wolClients, setWolClients] = useState<WolClient[]>([]);
	const { mutateAsync } = useMutationAPI();
	const { isMobile } = useCommonHooks();
	const [newWolClient, setNewWolClient] = useState<WolClient>(defaultWolClient);
	const [modalOpened, { open: openModal, close: closeModal }] = useDisclosure(false);
	const [searchValue, setSearchValue] = useState('');
	const [debouncedSearch] = useDebouncedValue(searchValue, 500);
	const [isOpen, setIsOpen] = useState(false);

	const handleClose = () => {
		setNewWolClient(defaultWolClient);
		closeModal();
	};

	useEffect(() => {
		if (wolClientsData && wolClientsIsFetched) {
			setWolClients(
				wolClientsData.filter((a: WolClient) =>
					a.hostname.toLowerCase().includes(debouncedSearch.toLowerCase()),
				),
			);
		}
	}, [wolClientsData, wolClientsIsFetched, debouncedSearch]);

	return (
		<Stack>
			<AddItemModal
				modalOpened={modalOpened}
				handleClose={handleClose}
				title={'Add a new WoL Client'}
				body={
					<Stack gap={0} w={'100%'} align='center'>
						<Group w={'100%'} justify='center'>
							<TextInput
								label={'Hostname'}
								className={textInputClasses.settingsItem}
								pt={16}
								classNames={textInputClasses}
								defaultValue={newWolClient.hostname}
								onChange={(event) => {
									setNewWolClient({
										...newWolClient,
										hostname: event.target.value,
									});
								}}
							/>
							<TextInput
								label={'MAC Address'}
								className={textInputClasses.settingsItem}
								pt={16}
								classNames={textInputClasses}
								defaultValue={newWolClient.macAddress}
								onChange={(event) => {
									setNewWolClient({
										...newWolClient,
										macAddress: event.target.value,
									});
								}}
							/>
						</Group>
						<Divider color='black' my='lg' />
						<Group pos={'absolute'} bottom={8}>
							<Button
								color={'green'}
								styles={{ label: { color: 'black' } }}
								onClick={() => {
									if (newWolClient) {
										mutateAsync({
											method: 'POST',
											endpoint: endpoint,
											body: newWolClient,
										});
										closeModal();
									}
								}}
							>
								Save
							</Button>
							<Button
								color={'red'}
								styles={{ label: { color: 'black' } }}
								onClick={() => {
									closeModal();
								}}
							>
								Cancel
							</Button>
						</Group>
					</Stack>
				}
			/>
			<SettingsHeader
				setDragging={undefined}
				openModal={openModal}
				title={'WoL Clients'}
				tooltip={{
					title: 'Wake on Lan clients can be configured here.',
					highlightList: ['Clients', 'homepage'],
					description: 'Clients can be powered on from the settings button the homepage.',
				}}
				searchValue={searchValue}
				setSearchValue={setSearchValue}
				searchPlaceholder={'Search Clients...'}
			/>
			<Stack
				mt={isMobile ? '9rem' : '6rem'}
				mb={isMobile ? '6rem' : '1rem'}
				w={'100%'}
				align='center'
			>
				<Grid columns={18} w={'75%'}>
					{wolClients?.map((client: WolClient) => (
						<GridCol w={'100%'} span={isMobile ? 18 : 6} key={client.id}>
							<Popover
								withArrow
								withOverlay
								closeOnClickOutside={!isOpen}
								classNames={popoverClasses}
							>
								<Popover.Target>
									<Group
										onClick={(e) => {
											e.stopPropagation();
										}}
										justify='center'
									>
										<WolClientSettingsItem client={client} />
									</Group>
								</Popover.Target>
								<Popover.Dropdown w={isMobile ? '100%' : undefined}>
									<DebouncedWolClient wolClient={client} setIsOpen={setIsOpen} />
								</Popover.Dropdown>
							</Popover>
						</GridCol>
					))}
				</Grid>
			</Stack>
		</Stack>
	);
};
export default WolClientSettings;