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

import { ActionIcon, Box, Button, Group, Overlay, Stack, Text } from '@mantine/core';
import { useState } from 'react';
import { FiEdit, FiShuffle, FiTrash, FiX } from 'react-icons/fi';
import { actionIconClasses } from 'styles';

function ThemeCard({
	handleOpen,
	handleDeleteTheme,
	theme,
	allThemes,
	setTheme,
	cardTheme,
	currentTheme,
	setValue,
	createTheme,
}: any) {
	const [hover, setHover] = useState(false);
	const [shift, setShift] = useState<number>(0);
	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: cardTheme.borderColor,
					borderRadius: '4px',
					color:
						cardTheme.borderColor === cardTheme.primaryColor
							? cardTheme.accentColor
							: cardTheme.primaryColor,
					zIndex: 3,
				}}
			>
				{cardTheme.name}
			</Text>
			<Button
				w={'275px'}
				h={'115px'}
				disabled={currentTheme === 'random'}
				style={{
					background: `linear-gradient(${cardTheme.backgroundColor}33, ${cardTheme.backgroundColor}33), no-repeat center url(/backgrounds/${cardTheme.backgroundImage})`,
					backgroundSize: 'cover',
					backgroundColor: cardTheme.backgroundColor,
					border: `solid ${cardTheme.borderColor}`,
				}}
				// data-cardTheme={cardTheme.name}
				onClick={() => {
					setValue(cardTheme.name);
				}}
			>
				{hover && currentTheme !== 'random' && <Overlay opacity={0.5} zIndex={0} />}
				<Group w={'100%'} gap={0} display={'flex'} align='center' justify='center'>
					<Stack align='center'>
						<Box
							style={{
								height: '10px',
								width: '100px',
								backgroundColor: cardTheme.searchColor,
								borderRadius: '4px',
								borderBottom: `solid 1px ${cardTheme.borderColor}`,
							}}
						/>
						<Group justify='space-between'>
							<Box
								style={{
									height: '8px',
									width: '100px',
									backgroundColor: cardTheme.accentColor,
									borderRadius: '4px',
								}}
							/>
							<Box
								style={{
									height: '8px',
									width: '50px',
									backgroundColor: cardTheme.primaryColor,
									borderRadius: '4px',
								}}
							/>
						</Group>
						<Group w={'100%'}>
							<Box
								style={{
									height: '5px',
									width: '40px',
									backgroundColor: cardTheme.primaryColor,
									borderRadius: '4px',
								}}
							/>
						</Group>
						<Group w={'100%'}>
							<Box
								style={{
									height: '10px',
									width: '40px',
									borderRadius: '4px',
									backdropFilter: 'blur(10px) brightness(1.5)',
									fontSize: '6px',
									justifyContent: 'center',
									alignContent: 'center',
									color: cardTheme.primaryColor,
								}}
							>
								lorem ipsum
							</Box>
							<Box
								style={{
									height: '10px',
									width: '40px',
									borderRadius: '4px',
									backdropFilter: 'blur(10px) brightness(1.5)',
									fontSize: '6px',
									justifyContent: 'center',
									alignContent: 'center',
									color: cardTheme.primaryColor,
								}}
							>
								lorem ipsum
							</Box>
							<Box
								style={{
									height: '10px',
									width: '40px',
									borderRadius: '4px',
									backdropFilter: 'blur(10px) brightness(1.5)',
									fontSize: '6px',
									justifyContent: 'center',
									alignContent: 'center',
									color: cardTheme.primaryColor,
								}}
							>
								lorem ipsum
							</Box>
						</Group>
					</Stack>
				</Group>
			</Button>
			{currentTheme === 'random' && cardTheme.name === theme.name ? (
				<Group
					onMouseEnter={() => {
						setShift(2);
					}}
					onMouseLeave={() => {
						setShift(0);
					}}
					onClick={() => {
						setShift(0);
					}}
					gap={0}
					style={{
						zIndex: 300,
						position: 'absolute',
						right: 0,
						top: 27 - shift,
						backgroundColor: shift === 0 ? 'white' : 'var(--color-background)',
						borderRadius: '50%',
						padding: '8px',
						margin: '4px',
						border: 'solid 2px',
						borderColor: shift === 0 ? 'black' : 'var(--color-text-pri)',
						transition: 'all 0.2s',
					}}
				>
					<FiShuffle
						onClick={() => {
							const enabled = allThemes
								.filter((t: any) => t.randomEnabled)
								.filter((t: any) => t.name !== theme.name);
							if (enabled.length === 0) {
								setTheme(allThemes[0]);
							} else {
								const index = Math.floor(Math.random() * enabled.length);
								setTheme(enabled[index]);
							}
						}}
						style={{
							fontSize: '2em',
							fontWeight: 'bold',
							color: shift === 0 ? 'black' : 'var(--color-text-pri)',
						}}
					/>
				</Group>
			) : (
				<Stack
					gap={0}
					style={{
						padding: '4px',
						paddingRight: '0px',
						position: 'absolute',
						right: 3,
						backgroundColor: '#ffffff88',
						borderTopLeftRadius: '10px',
						borderBottomLeftRadius: '10px',
					}}
					align='center'
					justify='center'
					display={
						currentTheme === 'random' && cardTheme.name === theme.name ? 'none' : 'flex'
					}
				>
					<ActionIcon
						style={{
							background: cardTheme.randomEnabled
								? 'rgba(255,255,255,1)'
								: 'rgba(255,255,255,0.5)',
							margin: '2px',
						}}
						styles={{
							root: {
								height: '10px',
								width: '10px',
							},
							icon: {
								height: '20px',
								width: '20px',
								fontSize: '24px',
								margin: 0,
								padding: 0,
							},
						}}
						onClick={() => {
							createTheme({
								method: 'PATCH',
								endpoint: 'api/themes',
								body: { ...cardTheme, randomEnabled: !cardTheme.randomEnabled },
							});
						}}
					>
						{cardTheme.randomEnabled ? <FiShuffle color='green' /> : <FiX color='red' />}
					</ActionIcon>
					<ActionIcon
						className={actionIconClasses.editButton}
						classNames={actionIconClasses}
						onClick={() => handleOpen(cardTheme)}
						mb={2}
					>
						<FiEdit color='green' />
					</ActionIcon>
					<ActionIcon
						className={actionIconClasses.editButton}
						classNames={actionIconClasses}
						onClick={() => handleDeleteTheme(cardTheme)}
					>
						<FiTrash color='red' />
					</ActionIcon>
				</Stack>
			)}
		</Group>
	);
}

export default ThemeCard;