TriggerFrontend/src/pages/settings/components/WoL/DebouncedWolClient.tsx

import { ActionIcon, Card, Group, Stack, Text, TextInput, Tooltip } from '@mantine/core';
import { useDebouncedValue, useDisclosure } from '@mantine/hooks';
import { DeleteItemModal } from 'components';
import { useCommonHooks, useMutationAPI } from 'hooks';
import { useEffect, useState } from 'react';
import { FaTrash } from 'react-icons/fa';
import { cardClasses, textClasses, textInputClasses, toolTipClasses } from 'styles';
import type { WolClient } from 'types';

function DebouncedWolClient({
	wolClient,
	setIsOpen,
}: {
	wolClient: WolClient;
	setIsOpen: (isOpen: boolean) => void;
}) {
	const { handleDelete, isMobile, theme } = useCommonHooks();
	const [modalOpened, { open: openModal, close: closeModal }] = useDisclosure(false);
	const { mutateAsync } = useMutationAPI();

	const [client, setClient] = useState<WolClient>(wolClient);
	const [update, setUpdate] = useState<WolClient>();
	const [debounced] = useDebouncedValue(update, 1000);
	const handleClose = () => {
		setIsOpen(false);
		closeModal();
	};

	useEffect(() => {
		if (debounced && Object.keys(debounced).length) {
			mutateAsync({ method: 'PATCH', endpoint: 'api/WolClients', body: debounced }).catch(
				(error) => {
					console.error(error);
				},
			);
		}
	}, [debounced]);

	useEffect(() => {
		if (update && update !== client && Object.keys(update).length) {
			setClient(update);
		}
	}, [update]);

	return (
		<Card
			p={isMobile ? 'xl' : undefined}
			className={cardClasses.settingsItem}
			classNames={cardClasses}
		>
			{modalOpened && (
				<DeleteItemModal
					modalOpened={modalOpened}
					handleClose={handleClose}
					handleDelete={() => handleDelete(client, 'api/WolClients')}
					title={'Delete WoL Client'}
					body={
						<Stack gap={0} w={'100%'} h={'150px'} align='center'>
							<Text>Are you sure you want to delete this WoL Client?</Text>
							<Text
								className={textClasses.deleteItem}
								classNames={textClasses}
							>{`"${client.hostname}"`}</Text>
							<Text c='red'>This action cannot be undone!</Text>
						</Stack>
					}
				/>
			)}
			<Tooltip
				className={toolTipClasses.default}
				classNames={toolTipClasses}
				label={'Delete'}
			>
				<ActionIcon
					pos={'absolute'}
					right={'1rem'}
					color='red'
					onClick={() => {
						openModal();
					}}
				>
					<FaTrash color='black' />
				</ActionIcon>
			</Tooltip>
			<Group w={'100%'} justify='center'>
				<TextInput
					label={'Hostname'}
					className={textInputClasses.settingsItem}
					classNames={textInputClasses}
					defaultValue={client.hostname}
					onChange={(event) => {
						setUpdate({
							...client,
							hostname: event.target.value,
						});
					}}
					styles={
						theme.textShadowsEnabled
							? {
									label: { boxShadow: '2px 2px var(--mantine-color-border-0)' },
								}
							: undefined
					}
				/>
				<TextInput
					label={'MAC Address'}
					className={textInputClasses.settingsItem}
					classNames={textInputClasses}
					defaultValue={client.macAddress}
					onChange={(event) => {
						setUpdate({
							...client,
							macAddress: event.target.value,
						});
					}}
					styles={
						theme.textShadowsEnabled
							? {
									label: { boxShadow: '2px 2px var(--mantine-color-border-0)' },
								}
							: undefined
					}
				/>
			</Group>
		</Card>
	);
}

export default DebouncedWolClient;