import { Button, Card, Group, Stack, Text } from '@mantine/core';
import { useMutationAPI } from 'hooks';

function DeleteBackground({
	fileName,
	setFileName,
	inUseBackgrounds,
	setBackground,
	setNewFileName,
	setConfirm,
}: {
	fileName: string;
	setFileName: (searchValue: string) => void;
	inUseBackgrounds: string[];
	setBackground: React.Dispatch<React.SetStateAction<File | null>>;
	setNewFileName: (searchValue: string) => void;
	setConfirm: (value: boolean) => void;
}) {
	const { mutateAsync } = useMutationAPI();
	return (
		<Stack
			justify='center'
			align='center'
			style={{
				width: '100%',
				height: '30rem',
				backgroundColor: 'var(--mantine-color-search-0)',
				padding: '1rem',
				borderRadius: '.5rem',
				backgroundFilter: 'blur(5px)',
			}}
		>
			<Text fw={600} fz={'2rem'}>
				Are you sure you want to delete {fileName}?
			</Text>
			{inUseBackgrounds.includes(fileName) && (
				<Text fw={600} fz={'1.5rem'}>
					This background is currently in use! This will result in a blank background on
					the theme.
				</Text>
			)}
			<Text fw={600} fz={'3rem'}>
				THIS ACTION CANNOT BE UNDONE!!!
			</Text>
			<Card
				style={{
					aspectRatio: '16/9',
					height: '100%',
					backgroundImage: `url(../../api/backgroundImages/${fileName})`,
					backgroundSize: 'cover',
					backgroundPosition: 'center',
					backgroundRepeat: 'no-repeat',
					padding: '2rem',
					margin: '1rem',
				}}
			/>
			<Group>
				<Button
					mt={'auto'}
					w={'min-content'}
					color='red'
					onClick={() => {
						setBackground(null);
						setFileName('');
						setNewFileName('');
						setConfirm(false);
						setFileName('');
						mutateAsync({
							method: 'DELETE',
							endpoint: 'api/backgrounds',
							body: { fileName },
						});
					}}
				>
					DELETE
				</Button>
				<Button
					mt={'auto'}
					w={'min-content'}
					onClick={() => {
						setBackground(null);
						setFileName('');
						setNewFileName('');
						setConfirm(false);
						setFileName('');
					}}
				>
					Cancel
				</Button>
			</Group>
		</Stack>
	);
}

export default DeleteBackground;