TriggerFrontend/src/pages/settings/components/Applications/DebouncedApplication.tsx

import {
	Box,
	Card,
	type ComboboxItem,
	type ComboboxLikeRenderOptionInput,
	Group,
	Select,
	Stack,
	Text,
	TextInput,
} from '@mantine/core';
import { useDebouncedValue, useDisclosure } from '@mantine/hooks';
import { DeleteItemModal, ManagementPill } from 'components';
import { useCommonHooks, useMutationAPI } from 'hooks';
import { useEffect, useState } from 'react';
import { cardClasses, selectClasses, textClasses, textInputClasses } from 'styles';
import type { Application } from 'types';

function DebouncedApplication({
	application,
	setIsOpen,
	allIcons,
}: {
	application: Application;
	setIsOpen: (isOpen: boolean) => void;
	allIcons: any;
}) {
	const { handleDelete, isMobile, theme } = useCommonHooks();
	const [modalOpened, { open: openModal, close: closeModal }] = useDisclosure(false);
	const { mutateAsync } = useMutationAPI();

	const [app, setApp] = useState<Application>(application);
	const [update, setUpdate] = useState<any>();
	const [debounced] = useDebouncedValue(update, 1000);
	const handleClose = () => {
		setIsOpen(false);
		closeModal();
	};
	useEffect(() => {
		if (debounced && Object.keys(debounced).length > 0) {
			mutateAsync({ method: 'PATCH', endpoint: 'api/applications', body: debounced });
		}
	}, [debounced]);

	useEffect(() => {
		if (update && update !== app && Object.keys(update).length) {
			setApp(update);
		}
	}, [update]);
	return (
		<Card
			p={isMobile ? 'xl' : undefined}
			className={cardClasses.settingsItem}
			classNames={cardClasses}
		>
			<DeleteItemModal
				modalOpened={modalOpened}
				handleClose={handleClose}
				handleDelete={() => handleDelete(app, 'api/applications')}
				title='Delete Application'
				body={
					<Stack gap={0} w={'100%'} h={'150px'} align='center'>
						<Text>Are you sure you want to delete this application?</Text>
						<Text
							className={textClasses.deleteItem}
							classNames={textClasses}
						>{`"${app.name}"`}</Text>
						<Text c='red'>This action cannot be undone!</Text>
					</Stack>
				}
			/>
			<Box
				style={{
					position: 'absolute',
					right: '1rem',
					top: '.5rem',
				}}
			>
				<ManagementPill
					enabled={app.enabled}
					onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
						setUpdate({
							...app,
							enabled: event.target.checked ? 1 : 0,
						});
					}}
					openModal={openModal}
				/>
			</Box>

			<Group justify='center' style={{ flexDirection: isMobile ? 'column' : 'row' }}>
				<TextInput
					label={'Name'}
					className={textInputClasses.settingsItem}
					classNames={textInputClasses}
					defaultValue={app.name}
					onChange={(event) => {
						setUpdate({
							...app,
							name: event.target.value,
						});
					}}
					disabled
					styles={
						theme.textShadowsEnabled
							? {
									label: { boxShadow: '2px 2px var(--mantine-color-border-0)' },
								}
							: undefined
					}
				/>
				<TextInput
					label={'Base URL'}
					className={textInputClasses.settingsItem}
					classNames={textInputClasses}
					defaultValue={app.baseUrl}
					onChange={(event) => {
						setUpdate({
							...app,
							baseUrl: event.target.value,
						});
					}}
					styles={
						theme.textShadowsEnabled
							? {
									label: { boxShadow: '2px 2px var(--mantine-color-border-0)' },
								}
							: undefined
					}
				/>
			</Group>
			<Group
				justify='center'
				pos={'relative'}
				style={{ flexDirection: isMobile ? 'column' : 'row' }}
			>
				<TextInput
					label={'URL'}
					className={textInputClasses.settingsItem}
					w={isMobile ? undefined : '100%'}
					classNames={textInputClasses}
					defaultValue={app.url}
					onChange={(event) => {
						setUpdate({
							...app,
							url: event.target.value,
						});
					}}
					styles={
						theme.textShadowsEnabled
							? {
									label: { boxShadow: '2px 2px var(--mantine-color-border-0)' },
								}
							: undefined
					}
				/>
			</Group>
			<Group
				justify='space-between'
				pos={'relative'}
				style={{ flexDirection: isMobile ? 'column' : 'row' }}
			>
				<Select
					w={isMobile ? '80%' : '48%'}
					label={'Icon'}
					className={selectClasses.settingsItem}
					classNames={{
						wrapper: selectClasses.menuSelectWrapper,
						input: selectClasses.menuSelectInput,
						label: selectClasses.menuSelectLabel,
						options: selectClasses.menuSelectOptions,
						option: selectClasses.menuSelectOption,
						dropdown: selectClasses.dropdown,
					}}
					mt={'.75rem'}
					limit={100}
					defaultSearchValue={app?.icon}
					data={Object.keys(allIcons).map((icon) => {
						return { value: icon, label: icon };
					})}
					defaultValue={app?.icon}
					comboboxProps={{
						zIndex: 3000,
					}}
					styles={
						theme.textShadowsEnabled
							? {
									label: { boxShadow: '2px 2px var(--mantine-color-border-0)' },
								}
							: undefined
					}
					onChange={(value: string | null) => {
						setUpdate({
							...app,
							icon: value,
						});
					}}
					renderOption={(item: ComboboxLikeRenderOptionInput<ComboboxItem>) => {
						const Icon = allIcons[item.option.value];
						return (
							<Group>
								{item.option.value}
								<Icon />
							</Group>
						);
					}}
					searchable
					maxDropdownHeight={175}
					onDropdownOpen={() => setIsOpen(true)}
					onDropdownClose={() => setIsOpen(false)}
				/>
				<TextInput
					label={'Filter'}
					className={textInputClasses.settingsItem}
					classNames={textInputClasses}
					defaultValue={app.filterName}
					onChange={(event) => {
						setUpdate({
							...app,
							filterName: event.target.value,
						});
					}}
					styles={
						theme.textShadowsEnabled
							? {
									label: { boxShadow: '2px 2px var(--mantine-color-border-0)' },
								}
							: undefined
					}
				/>
			</Group>
		</Card>
	);
}

export default DebouncedApplication;