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

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

function ThemePlaylistCard({
	cardPlaylist,
	handleOpen,
	handleDeletePlaylist,
	createPlaylist,
	allThemes,
}: any) {
	const [hover, setHover] = useState(false);
	const { currentThemePlaylist, setCurrentThemePlaylist, theme } = useCommonHooks();
	const syncableLists = ['All', 'Backgrounds', 'No Backgrounds'];
	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)}
		>
			<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.primaryColor,
					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.primaryColor,
						zIndex: 3,
					}}
					onClick={(event) => {
						event.stopPropagation();
						if (cardPlaylist.name === 'All') {
							createPlaylist({
								method: 'PATCH',
								endpoint: 'api/themePlaylists',
								body: {
									id: cardPlaylist.id,
									name: 'All',
									themeList: JSON.stringify(allThemes.map((theme: any) => theme.id)),
								},
							});
						}
						if (cardPlaylist.name === 'Backgrounds') {
							createPlaylist({
								method: 'PATCH',
								endpoint: 'api/themePlaylists',
								body: {
									id: cardPlaylist.id,
									name: 'Backgrounds',
									themeList: JSON.stringify(
										allThemes
											.filter((theme: any) => theme.backgroundImage !== 'none')
											.map((theme: any) => theme.id),
									),
								},
							});
						}
						if (cardPlaylist.name === 'No Backgrounds') {
							createPlaylist({
								method: 'PATCH',
								endpoint: 'api/themePlaylists',
								body: {
									id: cardPlaylist.id,
									name: 'No Backgrounds',
									themeList: JSON.stringify(
										allThemes
											.filter((theme: any) => theme.backgroundImage === '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.primaryColor,
							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.primaryColor,
								zIndex: 3,
							}}
							onClick={() => handleDeletePlaylist(cardPlaylist)}
						>
							<FiTrash />
						</ActionIcon>
					)}
				</>
			)}
			<Button
				w={'275px'}
				h={'300px'}
				style={{
					backgroundSize: 'cover',
					backgroundColor: theme.primaryColor,
					color: theme.accentColor,
					border: `solid ${theme.borderColor}`,
				}}
				onClick={() => {
					setCurrentThemePlaylist(cardPlaylist.name);
				}}
			>
				{hover && <Overlay opacity={0.5} zIndex={1} />}
				<Stack h={'100%'} w={'100%'}>
					{cardPlaylist.name !== 'Time of Day' ? (
						<>
							<Text>Count: {themeList.length}</Text>
							<ScrollArea h={'240px'} w={'100%'} style={{ zIndex: 2 }}>
								{themeList.length > 0 &&
									themeList.map((item: any) => {
										return <ThemeMiniCard key={item} item={item} allThemes={allThemes} />;
									})}
							</ScrollArea>
						</>
					) : (
						<>
							<Text>Timed Themes</Text>
							<ScrollArea h={'240px'} w={'100%'} style={{ zIndex: 2 }}>
								<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} />
							</ScrollArea>
						</>
					)}
				</Stack>
			</Button>
		</Group>
	);
}

export default ThemePlaylistCard;