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

import { Box, Button, Group, Stack, Text } from '@mantine/core';
import { useDisclosure } from '@mantine/hooks';
import { modals } from '@mantine/modals';
import { useCommonHooks, useMutationAPI, useQueryAPI } from 'hooks';
import { useState } from 'react';
import { FiChevronRight, FiPlus } from 'react-icons/fi';
import { buttonClasses, textClasses } from 'styles';
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: createPlaylist } = useMutationAPI();
	const { mutateAsync: deletePlaylist } = useMutationAPI();
	const [opened, { open, close }] = useDisclosure(false);
	const [selectedPlaylist, setSelectedPlaylist] = useState<any>({});
	const { currentThemePlaylist, setCurrentThemePlaylist, theme } = useCommonHooks();

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

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

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

	const openDeleteConfirmModal = (playlist: any) =>
		modals.openConfirmModal({
			title: 'Are you sure you want to delete this theme playlist?',
			labels: { confirm: 'Delete', cancel: 'Cancel' },
			confirmProps: { color: 'red' },
			onConfirm: () =>
				deletePlaylist({
					method: 'DELETE',
					endpoint: 'api/themePlaylists',
					body: playlist,
				}),
		});

	const handleDeletePlaylist = (playlist: any) => {
		openDeleteConfirmModal(playlist);
		close();
	};

	return (
		<>
			<ThemePlaylistModal
				opened={opened}
				handleClose={handleClose}
				selectedPlaylist={selectedPlaylist}
				setSelectedPlaylist={setSelectedPlaylist}
				handleSavePlaylist={handleSavePlaylist}
				allThemes={allThemes}
				createPlaylist={createPlaylist}
			/>
			<Stack h={'100%'} w={'100%'}>
				<Group w={'100%'} justify='space-between'>
					<Group>
						<Text className={textClasses.settingsSubTitle} classNames={textClasses}>
							Theme Playlists
						</Text>
						<Button
							mb={'-1.5em'}
							className={buttonClasses.tableButton}
							classNames={buttonClasses}
							onClick={() => {
								setSelectedPlaylist({
									name: 'New Playlist',
									themeList: '[]',
								});
								open();
							}}
						>
							<FiPlus />
						</Button>
					</Group>
				</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: any) => playlist.default === 1)
						.map((cardPlaylist: any) => {
							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}
											currentThemePlaylist={currentThemePlaylist}
											setCurrentThemePlaylist={setCurrentThemePlaylist}
											handleDeletePlaylist={handleDeletePlaylist}
											allThemes={allThemes}
											createPlaylist={createPlaylist}
										/>
									</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: any) => playlist.default === 0)
						.map((cardPlaylist: any) => {
							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}
											currentThemePlaylist={currentThemePlaylist}
											setCurrentThemePlaylist={setCurrentThemePlaylist}
											handleDeletePlaylist={handleDeletePlaylist}
											allThemes={allThemes}
											createPlaylist={createPlaylist}
										/>
									</Box>
								</Group>
							);
						})}
				</Group>
			</Stack>
		</>
	);
}

export default ThemePlaylists;