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

import {
	ActionIcon,
	Box,
	Button,
	Group,
	Highlight,
	Popover,
	Stack,
	Text,
	TextInput,
} from '@mantine/core';
import { useDebouncedValue, useDisclosure } from '@mantine/hooks';
import { useCommonHooks, useMutationAPI, useQueryAPI } from 'hooks';
import { useState } from 'react';
import { FiChevronRight, FiHelpCircle, FiPlus } from 'react-icons/fi';
import { actionIconClasses, buttonClasses, textClasses, textInputClasses } from 'styles';
import type { ThemePlaylist } from 'types';
import ThemePlaylistCard from './ThemePlaylistCard';
import ThemePlaylistModal from './ThemePlaylistModal';

function ThemePlaylists() {
	const { data: allThemes } = useQueryAPI({
		endpoint: 'api/themes',
	});
	const { data: themePlaylists } = useQueryAPI({
		endpoint: 'api/themePlaylists',
	});
	const { mutateAsync } = useMutationAPI();
	const [opened, { open, close }] = useDisclosure(false);
	const [selectedPlaylist, setSelectedPlaylist] = useState<any>({});
	const { currentThemePlaylist, setCurrentThemePlaylist, theme, isMobile } =
		useCommonHooks();
	const [searchValue, setSearchValue] = useState('');
	const [debouncedSearch] = useDebouncedValue(searchValue, 500);

	const handleOpen = (playlist: any) => {
		setSelectedPlaylist(playlist);
		open();
	};

	const handleClose = () => {
		close();
	};

	const handleSavePlaylist = () => {
		mutateAsync({
			method: selectedPlaylist.id === undefined ? 'POST' : 'PATCH',
			endpoint: 'api/themePlaylists',
			body: selectedPlaylist,
		});
		close();
	};

	return (
		<>
			<ThemePlaylistModal
				opened={opened}
				handleClose={handleClose}
				selectedPlaylist={selectedPlaylist}
				setSelectedPlaylist={setSelectedPlaylist}
				handleSavePlaylist={handleSavePlaylist}
				allThemes={allThemes}
				createPlaylist={mutateAsync}
			/>
			<Stack h={'100%'} w={'100%'}>
				<Group w={'100%'} justify='center' align='center' mt={'1rem'}>
					<Group w={isMobile ? undefined : '100%'}>
						<Text className={textClasses.settingsSubTitle} classNames={textClasses}>
							Theme Playlists
						</Text>
						<Popover withArrow withOverlay withinPortal={false}>
							<Popover.Target>
								<ActionIcon
									className={actionIconClasses.settingsTooltip}
									classNames={actionIconClasses}
								>
									<FiHelpCircle />
								</ActionIcon>
							</Popover.Target>
							<Popover.Dropdown
								style={{
									color: theme.primaryColor,
									backgroundColor: theme.backgroundColor,
									width: '500px',
								}}
							>
								<Stack>
									<Text className={textClasses.settingsTooltip} classNames={textClasses}>
										{'Theme playlists can be created here and applied to the homepage.'}
									</Text>
									<Highlight
										highlight={['Theme', 'Themes', 'Playlist', 'Playlists']}
										className={textClasses.settingsTooltip}
										classNames={textClasses}
										highlightStyles={{
											backgroundImage:
												'linear-gradient(45deg, var(--color-text-acc), var(--color-text-pri))',
											fontWeight: 700,
											WebkitBackgroundClip: 'text',
											WebkitTextFillColor: 'transparent',
										}}
									>
										{
											'Playlists are lists of themes. They can be enabled either here or in the settings button on the homepage. When a playlist is enabled, it will shuffle the included themes on the homepage. If a theme is part of a playlist, it will appear while the playlist is active, regardless of random/shuffle.'
										}
									</Highlight>
								</Stack>
							</Popover.Dropdown>
						</Popover>
						<Button
							className={buttonClasses.tableButton}
							classNames={buttonClasses}
							onClick={() => {
								setSelectedPlaylist({
									name: 'New Playlist',
									themeList: '[]',
								});
								open();
							}}
						>
							<FiPlus />
						</Button>
					</Group>
					<TextInput
						w={isMobile ? undefined : '35%'}
						pos={isMobile ? undefined : 'absolute'}
						className={textInputClasses.settingsItem}
						classNames={textInputClasses}
						autoFocus={!isMobile}
						placeholder='Search...'
						value={searchValue}
						onInput={(event: any) => {
							setSearchValue(event.target.value);
						}}
					/>
				</Group>
				<Group justify='center' align='center' pos={'relative'}>
					<Text p={0} className={textClasses.settingsSubTitle} classNames={textClasses}>
						Defaults
					</Text>
				</Group>
				<Group justify='center' align='center' pos={'relative'}>
					{themePlaylists
						?.filter((playlist: ThemePlaylist) => playlist.default === 1)
						?.filter((a: ThemePlaylist) =>
							a.name.toLowerCase().includes(debouncedSearch.toLowerCase()),
						)
						.map((cardPlaylist: ThemePlaylist) => {
							return (
								<Group key={cardPlaylist.name} pos={'relative'}>
									{cardPlaylist.name === currentThemePlaylist && (
										<FiChevronRight
											style={{
												position: 'absolute',
												left: -14,
												zIndex: 10,
												fontSize: '2em',
												fontWeight: 'bold',
												borderRadius: '50%',
												backgroundColor: theme.borderColor,
												color:
													theme.borderColor === theme.primaryColor
														? theme.accentColor
														: theme.backgroundColor,
											}}
										/>
									)}
									<Box>
										<ThemePlaylistCard
											cardPlaylist={cardPlaylist}
											handleOpen={handleOpen}
											currentThemePlaylist={currentThemePlaylist}
											setCurrentThemePlaylist={setCurrentThemePlaylist}
											allThemes={allThemes}
										/>
									</Box>
								</Group>
							);
						})}
				</Group>
				<Group justify='center' align='center' pos={'relative'}>
					<Text p={0} className={textClasses.settingsSubTitle} classNames={textClasses}>
						User Made
					</Text>
				</Group>
				<Group justify='center' align='center' pos={'relative'}>
					{themePlaylists
						?.filter((playlist: ThemePlaylist) => playlist.default === 0)
						?.filter((a: ThemePlaylist) =>
							a.name.toLowerCase().includes(debouncedSearch.toLowerCase()),
						)
						.sort((a: any, b: any) => (a.name > b.name ? 1 : -1))
						.map((cardPlaylist: ThemePlaylist) => {
							return (
								<Group key={cardPlaylist.name} pos={'relative'}>
									{cardPlaylist.name === currentThemePlaylist && (
										<FiChevronRight
											style={{
												position: 'absolute',
												left: -14,
												zIndex: 10,
												fontSize: '2em',
												fontWeight: 'bold',
												borderRadius: '50%',
												backgroundColor: theme.borderColor,
												color:
													theme.borderColor === theme.primaryColor
														? theme.accentColor
														: theme.primaryColor,
											}}
										/>
									)}
									<Box>
										<ThemePlaylistCard
											cardPlaylist={cardPlaylist}
											handleOpen={handleOpen}
											allThemes={allThemes}
										/>
									</Box>
								</Group>
							);
						})}
				</Group>
			</Stack>
		</>
	);
}

export default ThemePlaylists;