TriggerFrontend/src/pages/homepage/components/SettingsButton/ThemingCard.tsx

import { useTextTicker } from '@gfazioli/mantine-text-animate';
import {
	ActionIcon,
	type ComboboxItem,
	Group,
	Menu,
	Select,
	Stack,
	Text,
	Tooltip,
} from '@mantine/core';
import { useCommonHooks, useQueryAPI } from 'hooks';
import { useEffect, useState } from 'react';
import { FaDice } from 'react-icons/fa';
import { FiShuffle } from 'react-icons/fi';
import {
	actionIconClasses,
	selectClasses,
	stackClasses,
	textClasses,
	toolTipClasses,
} from 'styles';
import type { Theme, ThemePlaylist } from 'types';

function ThemingCard() {
	const { data: themePlaylistData } = useQueryAPI({
		endpoint: 'api/themePlaylists',
	});
	const { data: allThemeData, isFetched: allThemeDataIsFetched } = useQueryAPI({
		endpoint: 'api/themes',
	});
	const [allThemes, setAllThemes] = useState<Theme[]>([]);
	useEffect(() => {
		if (allThemeData && allThemeDataIsFetched) {
			setAllThemes(allThemeData);
		}
	}, [allThemeData, allThemeDataIsFetched]);
	const {
		isMobile,
		currentTheme,
		setCurrentTheme,
		setThemeName,
		handleThemeChange,
		theme,
		currentThemePlaylist,
		setCurrentThemePlaylist,
	} = useCommonHooks();

	const [current, setCurrent] = useState<string>(theme.name);

	const { text, isAnimating, start, stop } = useTextTicker({
		initialText: 'target',
		value: theme.name,
		delay: 0,
		speed: 1,
		easing: 'ease-in-out',
		animate: current !== theme.name,
	});

	useEffect(() => {
		if (theme.name === current) {
			setCurrent(theme.name);
			stop();
		} else {
			start();
		}
	}, [theme]);

	return (
		<Stack
			gap={0}
			justify='space-between'
			className={stackClasses.menuStack}
			classNames={stackClasses}
			pos={'relative'}
			style={{ aspectRatio: isMobile ? undefined : '1/1' }}
		>
			<Menu.Label pb={'2rem'}>Themes</Menu.Label>
			<Group mt={'-1.5rem'} mb={'-.25rem'} w={'95%'} h={'100%'} gap={0}>
				<Stack gap={0}>
					<Text className={textClasses.currentTheme} classNames={textClasses}>
						Current theme:
					</Text>
					<Text className={textClasses.themeName} classNames={textClasses}>
						{text}
					</Text>
				</Stack>
				<Tooltip
					className={toolTipClasses.default}
					classNames={toolTipClasses}
					label='Random Theme'
					withArrow
				>
					<ActionIcon
						className={actionIconClasses.menuActions}
						classNames={actionIconClasses}
						h={40}
						style={{
							backgroundColor: 'transparent',
							color: 'var(--mantine-color-primary-0)',
							borderTopRightRadius: 0,
							borderTopLeftRadius: 0,
							borderBottomLeftRadius: '10px',
							borderBottomRightRadius: '10px',
							position: 'absolute',
							right: 0,
						}}
						styles={{
							icon: {
								width: 'fit-content',
								height: 'fit-content',
								position: 'absolute',
								padding: 8,
								right: 2,
								bottom: 2,
								borderRadius: '50%',
							},
						}}
						disabled={currentThemePlaylist === 'Time of Day' || isAnimating}
						onClick={() => {
							const themeList = JSON.parse(
								themePlaylistData?.find(
									(t: ThemePlaylist) => t?.name === currentThemePlaylist,
								)?.themeList ?? '[]',
							);
							if (themeList.length > 0) {
								const filteredThemes = allThemes.filter((t: Theme) =>
									themeList.includes(t.id),
								);
								handleThemeChange(filteredThemes, false);
							} else if (currentThemePlaylist === 'All') {
								handleThemeChange(allThemes, true);
							} else if (currentThemePlaylist === 'Backgrounds') {
								handleThemeChange(
									allThemes.filter(
										(a: any) => !a.backgroundImage.toLowerCase().includes('none'),
									),
									false,
								);
							} else if (currentThemePlaylist === 'No Backgrounds') {
								handleThemeChange(
									allThemes.filter((a: any) =>
										a.backgroundImage.toLowerCase().includes('none'),
									),
									false,
								);
							}
						}}
					>
						<FaDice size={20} />
					</ActionIcon>
				</Tooltip>
			</Group>
			<Group justify='space-between' pos={'relative'} gap={0}>
				<Select
					label='Current Playlist:'
					placeholder='Pick a playlist...'
					mb={'.25rem'}
					ml={'.25rem'}
					value={currentThemePlaylist}
					data={[
						{ value: 'All', label: 'All' },
						{
							value: 'Backgrounds',
							label: 'Backgrounds',
							disabled:
								allThemes.filter(
									(a: any) => !a.backgroundImage.toLowerCase().includes('none'),
								).length === 0,
						},
						{
							value: 'No Backgrounds',
							label: 'No Backgrounds',
							disabled:
								allThemes.filter((a: any) =>
									a.backgroundImage.toLowerCase().includes('none'),
								).length === 0,
						},
						...(themePlaylistData
							?.map((playlist: ThemePlaylist) => {
								return {
									value: playlist.name,
									label: playlist.name,
									disabled: JSON.parse(playlist.themeList).length === 0,
								};
							})
							.toSorted((a: ComboboxItem, b: ComboboxItem) =>
								a.label.localeCompare(b.label),
							) ?? []),
					]}
					classNames={{
						wrapper: selectClasses.menuSelectWrapper,
						root: selectClasses.menuSelectRoot,
						input: selectClasses.menuSelectInput,
						label: selectClasses.menuSelectLabel,
						options: selectClasses.menuSelectOptions,
						option: selectClasses.menuSelectOption,
					}}
					labelProps={{ top: 8, left: 12 }}
					comboboxProps={{
						withinPortal: false,
						position: 'top',
						width: '100%',
					}}
					w={'70%'}
					style={{
						zIndex: 2,
					}}
					styles={
						theme.textShadowsEnabled
							? {
									label: { boxShadow: '2px 2px var(--mantine-color-border-0)' },
								}
							: undefined
					}
					onChange={(_value, option: ComboboxItem) => {
						setCurrentThemePlaylist(option.value);
						if (option.value === 'Time of Day') {
							const themeList = JSON.parse(
								themePlaylistData.find((t: ThemePlaylist) => t.name === 'Time of Day')
									.themeList,
							);
							setThemeName(
								allThemeData.find(
									(t: Theme) =>
										t.id === Number(themeList[Math.floor(new Date().getHours() / 6)]),
								).name,
							);
						} else {
							setThemeName('random');
						}
					}}
				/>
				<Tooltip
					className={toolTipClasses.default}
					classNames={toolTipClasses}
					label='Shuffle Playlist'
					withArrow
				>
					<ActionIcon
						className={actionIconClasses.menuActions}
						classNames={actionIconClasses}
						disabled={currentThemePlaylist === 'Time of Day' || isAnimating}
						h={40}
						style={{
							backgroundColor: 'transparent',
							color:
								currentTheme === 'random'
									? 'var(--mantine-color-accent-0)'
									: 'var(--mantine-color-primary-0)',
							borderTopRightRadius: 0,
							borderTopLeftRadius: 0,
							borderBottomLeftRadius: '10px',
							borderBottomRightRadius: '10px',
							position: 'absolute',
							right: 0,
							bottom: 0,
						}}
						styles={{
							icon: {
								backgroundColor:
									currentTheme === 'random'
										? `${theme?.searchColor === theme?.primaryColor ? theme.searchColor?.substring(0, 7) : theme.primaryColor?.substring(0, 7)}88`
										: 'transparent',
								width: 'fit-content',
								height: 'fit-content',
								position: 'absolute',
								padding: 8,
								right: 2,
								bottom: 2,
								borderRadius: '50%',
							},
						}}
						onClick={() => {
							setCurrentTheme(currentTheme === 'random' ? theme.name : 'random');
							setCurrentThemePlaylist('All');
						}}
					>
						<FiShuffle size={20} />
					</ActionIcon>
				</Tooltip>
			</Group>
		</Stack>
	);
}

export default ThemingCard;