TriggerFrontend/src/pages/settings/components/Bookmarks/DebouncedBookmarkItem.tsx

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

function DebouncedBookmarkItem({
	bookmarkItem,
	setIsOpen,
}: {
	bookmarkItem: Bookmark;
	setIsOpen: (isOpen: boolean) => void;
}) {
	const { handleDelete, isMobile, theme } = useCommonHooks();
	const [modalOpened, { open: openModal, close: closeModal }] = useDisclosure(false);
	const { mutateAsync } = useMutationAPI();
	const { data: groupData, isFetched: groupsIsFetched } = useQueryAPI({
		endpoint: 'api/bookmarkCategories',
	});
	const [bookmark, setBookmark] = useState<Bookmark>(bookmarkItem);
	const [groups, setGroups] = useState<BookmarkGroup[]>([]);
	const [update, setUpdate] = useState<any>({});
	const [debounced] = useDebouncedValue(update, 1000);
	const handleClose = () => {
		setIsOpen(false);
		closeModal();
	};
	useEffect(() => {
		if (Object.keys(debounced).length) {
			mutateAsync({ method: 'PATCH', endpoint: 'api/bookmarks', body: debounced });
		}
	}, [debounced]);

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

	useEffect(() => {
		if (groupData) {
			setGroups(
				groupData.sort(
					(a: BookmarkGroup, b: BookmarkGroup) => a.categoryName > b.categoryName,
				),
			);
		}
	}, [groupData, groupsIsFetched]);

	return (
		<Card
			p={isMobile ? 'xl' : undefined}
			className={cardClasses.settingsItem}
			classNames={cardClasses}
		>
			<DeleteItemModal
				modalOpened={modalOpened}
				handleClose={handleClose}
				handleDelete={() => handleDelete(bookmark, 'api/bookmarks')}
				body={
					<Stack gap={0} w={'100%'} h={'150px'} align='center'>
						<Text>Are you sure you want to delete this bookmark?</Text>
						<Text
							style={{
								fontWeight: 'bold',
								fontSize: '1.25rem',
								padding: '.5rem',
								margin: '.5rem',
								borderRadius: '10px',
								backgroundColor: 'var(--mantine-color-accent-0)',
								color: 'var(--mantine-color-background-0)',
							}}
						>{`"${bookmark.name}"`}</Text>
						<Text c='red'>This action cannot be undone!</Text>
					</Stack>
				}
				title='Delete Bookmark'
			/>
			<ManagementPill
				enabled={bookmark.enabled}
				onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
					setUpdate({
						...bookmark,
						enabled: event.target.checked ? 1 : 0,
					});
				}}
				openModal={openModal}
			/>
			<Group
				justify='space-between'
				pos={'relative'}
				style={{ flexDirection: isMobile ? 'column' : 'row' }}
			>
				<TextInput
					label={'Name'}
					className={textInputClasses.settingsItem}
					classNames={textInputClasses}
					defaultValue={bookmark.name}
					onChange={(event) => {
						setUpdate({
							...bookmark,
							name: event.target.value,
						});
					}}
					styles={
						theme.textShadowsEnabled
							? {
									label: { boxShadow: '2px 2px var(--mantine-color-border-0)' },
								}
							: undefined
					}
				/>
				<Select
					label={'Category'}
					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={bookmark?.category}
					data={groups.map((group) => {
						return {
							label: group.categoryName,
							value: group.categoryName,
						};
					})}
					defaultValue={bookmark?.category}
					comboboxProps={{
						zIndex: 3000,
					}}
					styles={
						theme.textShadowsEnabled
							? {
									label: { boxShadow: '2px 2px var(--mantine-color-border-0)' },
								}
							: undefined
					}
					onChange={(value: string | null) => {
						setUpdate({
							...bookmark,
							category: value,
						});
					}}
					searchable
					maxDropdownHeight={175}
					onDropdownOpen={() => setIsOpen(true)}
					onDropdownClose={() => setIsOpen(false)}
				/>
			</Group>
			<Group justify='center' style={{ flexDirection: isMobile ? 'column' : 'row' }}>
				<TextInput
					label={'URL'}
					className={textInputClasses.settingsItem}
					classNames={textInputClasses}
					w={isMobile ? '80%' : '100%'}
					defaultValue={bookmark.url}
					onChange={(event) => {
						setUpdate({
							...bookmark,
							url: event.target.value,
						});
					}}
					styles={
						theme.textShadowsEnabled
							? {
									label: { boxShadow: '2px 2px var(--mantine-color-border-0)' },
								}
							: undefined
					}
				/>
			</Group>
		</Card>
	);
}

export default DebouncedBookmarkItem;