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

import {
	ActionIcon,
	Button,
	Group,
	Modal,
	Overlay,
	ScrollArea,
	Stack,
	Text,
} from '@mantine/core';
import { useDisclosure } from '@mantine/hooks';
import { useCommonHooks, useMutationAPI } from 'hooks';
import { useState } from 'react';
import { FiEdit, FiRefreshCcw, FiTrash } from 'react-icons/fi';
import { modalClasses } from 'styles';
import ThemeMiniCard from './ThemeMiniCard';

function ThemePlaylistCard({ cardPlaylist, handleOpen, allThemes }: any) {
	const [hover, setHover] = useState(false);
	const {
		setThemeName,
		setCurrentThemePlaylist,
		theme,
		isMobile,
		modalStyle,
		handleDelete,
	} = useCommonHooks();
	const syncableLists = ['All', 'Backgrounds', 'No Backgrounds'];
	const { mutateAsync } = useMutationAPI();
	const [modalOpened, { open: openModal, close: closeModal }] = useDisclosure(false);
	const themeList = JSON.parse(
		cardPlaylist.themeList.name === 'Time of Day' ? '[]' : cardPlaylist.themeList,
	);

	return (
		<Group
			gap={0}
			align='center'
			justify='center'
			display={'grid'}
			pos={'relative'}
			onMouseEnter={() => setHover(true)}
			onMouseLeave={() => setHover(false)}
		>
			<Modal.Root
				size={'60%'}
				fullScreen={isMobile}
				className={modalClasses.helpModal}
				classNames={modalClasses}
				opened={modalOpened}
				onClose={() => {
					closeModal();
				}}
				style={modalStyle}
				closeOnEscape
				closeOnClickOutside
			>
				<Modal.Overlay />
				<Modal.Content>
					<Modal.Header>
						<Modal.Title>Delete Theme Playlist</Modal.Title>
						<Modal.CloseButton />
					</Modal.Header>
					<Modal.Body pb={'2rem'}>
						<Stack gap={0} w={'100%'} h={'150px'} align='center'>
							<Text>Are you sure you want to delete this Theme Playlist?</Text>
							<Text
								style={{
									fontWeight: 'bold',
									fontSize: '20px',
									padding: '8px',
									margin: '8px',
									borderRadius: '10px',
									backgroundColor: 'var(--color-text-acc)',
									color: 'var(--color-background)',
								}}
							>{`"${cardPlaylist.name}"`}</Text>
							<Text c='red'>This action cannot be undone!</Text>
							<Group pos={'absolute'} bottom={8}>
								<Button
									color={'red'}
									styles={{ label: { color: 'black' } }}
									onClick={() => {
										handleDelete(cardPlaylist, 'api/themePlaylists');
										closeModal();
									}}
								>
									Delete
								</Button>
								<Button
									color={'grey'}
									styles={{ label: { color: 'black' } }}
									onClick={() => {
										closeModal();
									}}
								>
									Cancel
								</Button>
							</Group>
						</Stack>
					</Modal.Body>
				</Modal.Content>
			</Modal.Root>
			<Text
				style={{
					position: 'absolute',
					top: -10,
					left: 6,
					paddingRight: 4,
					paddingLeft: 4,
					backgroundColor: theme.borderColor,
					borderRadius: '4px',
					color:
						theme.borderColor === theme.primaryColor
							? theme.accentColor
							: theme.backgroundColor,
					zIndex: 3,
				}}
			>
				{cardPlaylist.name}
			</Text>
			{syncableLists.includes(cardPlaylist.name) ? (
				<ActionIcon
					style={{
						position: 'absolute',
						top: -10,
						right: 6,
						paddingRight: 4,
						paddingLeft: 4,
						backgroundColor: theme.borderColor,
						borderRadius: '4px',
						color:
							theme.borderColor === theme.primaryColor
								? theme.accentColor
								: theme.backgroundColor,
						zIndex: 3,
					}}
					onClick={(event) => {
						event.stopPropagation();
						if (cardPlaylist.name === 'All') {
							mutateAsync({
								method: 'PATCH',
								endpoint: 'api/themePlaylists',
								body: {
									id: cardPlaylist.id,
									name: 'All',
									themeList: JSON.stringify(allThemes.map((theme: any) => theme.id)),
								},
							});
						}
						if (cardPlaylist.name === 'Backgrounds') {
							mutateAsync({
								method: 'PATCH',
								endpoint: 'api/themePlaylists',
								body: {
									id: cardPlaylist.id,
									name: 'Backgrounds',
									themeList: JSON.stringify(
										allThemes
											.filter(
												(theme: any) => theme.backgroundImage.toLowerCase() !== 'none',
											)
											.map((theme: any) => theme.id),
									),
								},
							});
						}
						if (cardPlaylist.name === 'No Backgrounds') {
							mutateAsync({
								method: 'PATCH',
								endpoint: 'api/themePlaylists',
								body: {
									id: cardPlaylist.id,
									name: 'No Backgrounds',
									themeList: JSON.stringify(
										allThemes
											.filter(
												(theme: any) => theme.backgroundImage.toLowerCase() === 'none',
											)
											.map((theme: any) => theme.id),
									),
								},
							});
						}
					}}
				>
					<FiRefreshCcw />
				</ActionIcon>
			) : (
				<>
					<ActionIcon
						style={{
							position: 'absolute',
							top: -10,
							right: 6,
							paddingRight: 4,
							paddingLeft: 4,
							backgroundColor: theme.borderColor,
							borderRadius: '4px',
							color:
								theme.borderColor === theme.primaryColor
									? theme.accentColor
									: theme.backgroundColor,
							zIndex: 3,
						}}
						onClick={() => {
							handleOpen(cardPlaylist);
						}}
					>
						<FiEdit />
					</ActionIcon>
					{cardPlaylist.default === 0 && (
						<ActionIcon
							style={{
								position: 'absolute',
								top: -10,
								right: 40,
								paddingRight: 4,
								paddingLeft: 4,
								backgroundColor: theme.borderColor,
								borderRadius: '4px',
								color:
									theme.borderColor === theme.primaryColor
										? theme.accentColor
										: theme.backgroundColor,
								zIndex: 3,
							}}
							onClick={() => {
								openModal();
							}}
						>
							<FiTrash />
						</ActionIcon>
					)}
				</>
			)}
			<Button
				w={'275px'}
				h={'310px'}
				style={{
					backgroundSize: 'cover',
					backgroundColor: theme.searchColor,
					color: theme.accentColor,
					border: `solid ${theme.borderColor}`,
				}}
				onClick={() => {
					setCurrentThemePlaylist(cardPlaylist.name);
					setThemeName('random');
				}}
			>
				{hover && <Overlay opacity={0.5} zIndex={1} />}
				<Stack h={'100%'} w={'100%'}>
					{cardPlaylist.name !== 'Time of Day' ? (
						<>
							<Text mt={8} mb={-8}>
								Count: {themeList.length}
							</Text>
							<ScrollArea h={'255px'} w={'100%'} style={{ zIndex: 2 }}>
								<Stack gap={4}>
									{themeList.length > 0 &&
										themeList.map((item: any) => {
											return (
												<ThemeMiniCard key={item} item={item} allThemes={allThemes} />
											);
										})}
								</Stack>
							</ScrollArea>
						</>
					) : (
						<>
							<Text mt={8} mb={-8}>
								Timed Themes
							</Text>
							<ScrollArea h={'255px'} w={'100%'} style={{ zIndex: 2 }}>
								<Stack gap={4}>
									<ThemeMiniCard item={Number(themeList[0])} allThemes={allThemes} />
									<ThemeMiniCard item={Number(themeList[1])} allThemes={allThemes} />
									<ThemeMiniCard item={Number(themeList[2])} allThemes={allThemes} />
									<ThemeMiniCard item={Number(themeList[3])} allThemes={allThemes} />
								</Stack>
							</ScrollArea>
						</>
					)}
				</Stack>
			</Button>
		</Group>
	);
}

export default ThemePlaylistCard;