import { Button, Card, Group, Stack, Text, TextInput } from '@mantine/core';
import { useCommonHooks, useMutationAPI } from 'hooks';
import { useState } from 'react';
import { textInputClasses } from 'styles';

export function EditBackground({
	fileName,
	setFileName,
	inUseBackgrounds,
	setBackground,
	setNewFileName,
	setEditing,
}: {
	fileName: string;
	setFileName: (searchValue: string) => void;
	inUseBackgrounds: string[];
	setBackground: React.Dispatch<React.SetStateAction<File | null>>;
	setNewFileName: (searchValue: string) => void;
	setEditing: React.Dispatch<React.SetStateAction<boolean>>;
}) {
	const [rename, setRename] = useState<string>('');
	const { mutateAsync } = useMutationAPI();
	const { theme } = useCommonHooks();
	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'}>
				Editing {fileName}
			</Text>
			{inUseBackgrounds.includes(fileName) && (
				<Text fw={600} fz={'1.5rem'}>
					Updating the name will update the associated themes.
				</Text>
			)}
			<Group h={'100%'} mb={'1rem'}>
				<TextInput
					className={textInputClasses.settingsItem}
					classNames={textInputClasses}
					label='New Name'
					onChange={(e) => setRename(e.target.value)}
					styles={
						theme.textShadowsEnabled && {
							label: { boxShadow: '2px 2px var(--mantine-color-border-0)' },
						}
					}
				/>
				<Card
					style={{
						aspectRatio: '16/9',
						height: '100%',
						backgroundImage: `url(../../api/backgroundImages/${fileName})`,
						backgroundSize: 'cover',
						backgroundPosition: 'center',
						backgroundRepeat: 'no-repeat',
						padding: '2rem',
						margin: '1rem',
					}}
				/>
			</Group>
			<Group>
				<Button
					mt={'auto'}
					w={'min-content'}
					color='green'
					onClick={() => {
						if (
							!rename.endsWith('.png') &&
							!rename.endsWith('.jpg') &&
							!rename.endsWith('.jpeg')
						) {
							mutateAsync({
								method: 'PATCH',
								endpoint: 'api/backgrounds',
								body: {
									fileName,
									newFileName: `${rename}${fileName.substring(
										fileName.lastIndexOf('.'),
										fileName.length,
									)}`,
								},
							});
						} else {
							mutateAsync({
								method: 'PATCH',
								endpoint: 'api/backgrounds',
								body: {
									fileName,
									newFileName: rename,
								},
							});
						}
						setBackground(null);
						setFileName('');
						setNewFileName('');
						setEditing(false);
					}}
				>
					Save
				</Button>
				<Button
					mt={'auto'}
					w={'min-content'}
					color={'var(--mantine-color-red-6)'}
					onClick={() => {
						setBackground(null);
						setFileName('');
						setNewFileName('');
						setEditing(false);
						setFileName('');
					}}
				>
					Cancel
				</Button>
			</Group>
		</Stack>
	);
}