TriggerFrontend/src/pages/settings/components/Theming/BackgroundModal.tsx

import {
	ActionIcon,
	Button,
	Card,
	FileInput,
	Group,
	Image,
	Modal,
	ScrollArea,
	SimpleGrid,
	Text,
} from '@mantine/core';
import { useCommonHooks } from 'hooks';
import { useFileUploadAPI, useMutationAPI } from 'hooks/useAPI';
import { useState } from 'react';
import { FiTrash } from 'react-icons/fi';
import { modalClasses, scrollAreaClasses } from 'styles';

function BackgroundModal({
	backgroundModalOpened,
	handleBackgroundModalClose,
	backgroundList,
}: {
	backgroundModalOpened: boolean;
	handleBackgroundModalClose: () => void;
	backgroundList: string[];
}) {
	const [background, setBackground] = useState<File | null>(null);
	const [err, setErr] = useState<boolean>(false);
	const { isMobile } = useCommonHooks();
	const { mutateAsync: uploadAsync } = useFileUploadAPI();
	const { mutateAsync } = useMutationAPI();
	const fd = new FormData();
	const handleFileUpload = (e: any) => {
		setErr(false);
		setBackground(e);
	};

	return (
		<Modal.Root
			size={'75%'}
			className={modalClasses.editThemeModal}
			classNames={modalClasses}
			opened={backgroundModalOpened}
			onClose={() => {
				handleBackgroundModalClose();
				setBackground(null);
			}}
			fullScreen={isMobile}
			centered
		>
			<Modal.Overlay style={{ backdropFilter: 'blur(5px)' }} />
			<Modal.Content>
				<Modal.Header style={{ justifyContent: 'center' }}>
					<Group pos={'absolute'}>
						<Text fw={600} fz={'1.5rem'} c={'var(--mantine-color-primary-0)'}>
							Manage Backgrounds
						</Text>
					</Group>
					<Modal.CloseButton />
				</Modal.Header>
				<Modal.Body p={'2rem'}>
					<ScrollArea
						className={scrollAreaClasses.default}
						classNames={scrollAreaClasses}
						type={'always'}
						style={{
							width: '100%',
							height: '30rem',
							backgroundColor: 'var(--mantine-color-search-0)',
							padding: '1rem',
							borderRadius: '.5rem',
							backgroundFilter: 'blur(5px)',
						}}
					>
						<SimpleGrid w={'100%'} cols={3} p={'.5rem'}>
							{backgroundList
								.filter((background) => background !== 'None')
								.map((background) => (
									<Group key={background} display={'flex'} pos={'relative'}>
										<Text
											style={{
												color: 'var(--mantine-color-primary-0)',
												backgroundColor: 'var(--mantine-color-accent-0)',
												padding: '.25rem',
												borderRadius: '.5rem',
												position: 'absolute',
												top: '-.5rem',
												left: 0,
												zIndex: 3,
											}}
										>
											{background}
										</Text>
										<Card
											style={{
												aspectRatio: '16/9',
												width: '100%',
												backgroundImage: `url(../../api/backgroundImages/${background})`,
												backgroundSize: 'cover',
												backgroundPosition: 'center',
												backgroundRepeat: 'no-repeat',
												padding: '2rem',
												margin: '1rem',
											}}
										/>
										<ActionIcon
											color='var(--mantine-color-red-6)'
											style={{
												position: 'absolute',
												bottom: '.5rem',
												right: '.5rem',
												zIndex: 3,
											}}
											onClick={() => {
												mutateAsync({
													method: 'DELETE',
													endpoint: 'api/backgrounds',
													body: { background },
												});
											}}
										>
											<FiTrash />
										</ActionIcon>
									</Group>
								))}
						</SimpleGrid>
					</ScrollArea>
					<Group gap={0} w={'100%'} align={'center'} justify='space-between'>
						<FileInput
							clearable
							accept='image/png,image/jpeg'
							value={background}
							onChange={handleFileUpload}
							label={'Upload Background'}
							placeholder={'Select...'}
							description={
								'Max size: 50MB for upload. Images are resized to 300kb after upload.'
							}
							p={'xl'}
							w={'60%'}
							pl={0}
							error={err && 'Please upload a background'}
							styles={{
								input: {
									color: 'var(--mantine-color-primary-0)',
									borderColor: 'var(--mantine-color-primary-0)',
								},
								placeholder: {
									color: 'var(--mantine-color-accent-0)',
								},
							}}
						/>
						<Card
							style={{
								aspectRatio: '16/9',
								width: '35%',
								backgroundSize: 'cover',
								backgroundPosition: 'center',
								backgroundRepeat: 'no-repeat',
								backgroundColor: 'var(--mantine-color-search-0)',
								padding: '2rem',
								margin: '1rem',
								marginRight: 0,
							}}
						>
							{background ? (
								<Image src={URL.createObjectURL(background)} w={'100%'} h={'100%'} />
							) : (
								<Image
									src={'https://placehold.co/800x450?text=Select%20an%20Image'}
									w={'100%'}
									h={'100%'}
								/>
							)}
						</Card>
					</Group>
					<Button
						onClick={() => {
							if (background) {
								fd.append('background', background || '');
								uploadAsync({
									method: 'POST',
									endpoint: 'api/backgrounds',
									body: fd,
								});
								handleBackgroundModalClose();
								setBackground(null);
								setErr(false);
							} else {
								setErr(true);
							}
						}}
					>
						Upload
					</Button>
				</Modal.Body>
			</Modal.Content>
		</Modal.Root>
	);
}
export default BackgroundModal;