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

import {
	ActionIcon,
	Button,
	Group,
	Overlay,
	ScrollArea,
	Stack,
	Text,
} from '@mantine/core';
import { useDisclosure } from '@mantine/hooks';
import { useCommonHooks } from 'hooks';
import { useState } from 'react';
import { FiEdit, FiTrash } from 'react-icons/fi';
import { scrollAreaClasses } from 'styles';
import type { Theme, ThemePlaylist } from 'types';
import DeleteItemModal from '../Shared/DeleteItemModal';
import ThemeMiniCard from './ThemeMiniCard';

function ThemePlaylistCard({
	cardPlaylist,
	handleOpen,
	allThemes,
}: {
	cardPlaylist: any;
	handleOpen: (cardPlaylist: ThemePlaylist) => void;
	allThemes: Theme[];
}) {
	const [hover, setHover] = useState(false);
	const { setThemeName, setCurrentThemePlaylist, theme, handleDelete } = useCommonHooks();
	const defaultLists = ['All', 'Backgrounds', 'No Backgrounds'];
	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)}
		>
			<DeleteItemModal
				modalOpened={modalOpened}
				handleClose={closeModal}
				handleDelete={() => handleDelete(cardPlaylist, 'api/themePlaylists')}
				title='Delete Theme Playlist'
				body={
					<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: '1.25rem',
								padding: '.5rem',
								margin: '.5rem',
								borderRadius: '10px',
								backgroundColor: 'var(--mantine-color-accent-0)',
								color: 'var(--mantine-color-background-0)',
							}}
						>{`"${cardPlaylist.name}"`}</Text>
						<Text c='red'>This action cannot be undone!</Text>
					</Stack>
				}
			/>
			<Text
				style={{
					position: 'absolute',
					top: -10,
					left: 6,
					paddingRight: '.25rem',
					paddingLeft: '.25rem',
					backgroundColor: 'var(--mantine-color-border-0)',
					borderRadius: '4px',
					color:
						theme.borderColor === theme.primaryColor
							? 'var(--mantine-color-accent-0)'
							: 'var(--mantine-color-background-0)',
					zIndex: 3,
				}}
			>
				{cardPlaylist.name}
			</Text>
			{!defaultLists.includes(cardPlaylist.name) && (
				<ActionIcon
					style={{
						position: 'absolute',
						top: -10,
						right: 6,
						paddingRight: '.25rem',
						paddingLeft: '.25rem',
						backgroundColor: 'var(--mantine-color-border-0)',
						borderRadius: '4px',
						color:
							theme.borderColor === theme.primaryColor
								? 'var(--mantine-color-accent-0)'
								: 'var(--mantine-color-background-0)',
						zIndex: 3,
					}}
					onClick={() => {
						handleOpen(cardPlaylist);
					}}
				>
					<FiEdit />
				</ActionIcon>
			)}
			{cardPlaylist.default === 0 && (
				<ActionIcon
					style={{
						position: 'absolute',
						top: -10,
						right: 40,
						paddingRight: '.25rem',
						paddingLeft: '.25rem',
						backgroundColor: 'var(--mantine-color-border-0)',
						borderRadius: '4px',
						color:
							theme.borderColor === theme.primaryColor
								? 'var(--mantine-color-accent-0)'
								: 'var(--mantine-color-background-0)',
						zIndex: 3,
					}}
					onClick={() => {
						openModal();
					}}
				>
					<FiTrash />
				</ActionIcon>
			)}
			<Button
				w={'275px'}
				h={'320px'}
				style={{
					backgroundSize: 'cover',
					backgroundColor: 'var(--mantine-color-search-0)',
					color: 'var(--mantine-color-accent-0)',
					border: 'solid var(--mantine-color-border-0)',
				}}
				onClick={() => {
					setCurrentThemePlaylist(cardPlaylist.name);
					setThemeName('random');
				}}
				disabled={themeList.length === 0}
			>
				{hover && <Overlay opacity={0.5} zIndex={1} />}
				<Stack h={'100%'} w={'100%'} align='center' mt={'.75rem'}>
					{cardPlaylist.name !== 'Time of Day' ? (
						<>
							<Text
								px={'.5rem'}
								mt={'.5rem'}
								mb={'-.5rem'}
								style={{
									color: 'var(--mantine-color-background-0)',
									backgroundColor: 'var(--mantine-color-primary-0)',
									borderRadius: '4px',
									zIndex: 160,
								}}
							>
								Count: {themeList.length}
							</Text>
							<ScrollArea
								className={scrollAreaClasses.default}
								classNames={scrollAreaClasses}
								h={'255px'}
								w={'100%'}
								style={{ zIndex: 2 }}
							>
								<Stack gap={4}>
									{themeList.length > 0 &&
										themeList
											.sort((a: number, b: number) => (a > b ? 1 : -1))
											.map((item: number) => {
												return (
													<ThemeMiniCard key={item} item={item} allThemes={allThemes} />
												);
											})}
								</Stack>
							</ScrollArea>
						</>
					) : (
						<>
							<Text
								px={'.5rem'}
								mt={'.5rem'}
								mb={'-.5rem'}
								style={{
									color: 'var(--mantine-color-background-0)',
									backgroundColor: 'var(--mantine-color-primary-0)',
									borderRadius: '4px',
									zIndex: 160,
								}}
							>
								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;