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

import { Box, Button, Group, Overlay, Stack, Switch, Text } from '@mantine/core';
import { useDisclosure } from '@mantine/hooks';
import { useCommonHooks, useMutationAPI } from 'hooks';
import { useEffect, useState } from 'react';
import { FiChevronRight, FiPlus } from 'react-icons/fi';
import '@mantine/core/styles/ModalBase.css';
import '@mantine/core/styles/Modal.css';
import { modals } from '@mantine/modals';
import { buttonClasses, textClasses } from 'styles';
import ThemeCard from './ThemeCard';
import ThemeModal from './ThemeModal';
function ThemesSettings() {
	const [opened, { open, close }] = useDisclosure(false);
	const [pickerOpen, { open: openPicker, close: closePicker }] = useDisclosure(false);
	const [colorId, setColorId] = useState<string>('');
	const [colorValue, setColorValue] = useState('#000000');

	const [backgroundList, setBackgroundList] = useState<any>(['None']);
	const [selectedTheme, setSelectedTheme] = useState<any>({});
	const { mutateAsync: createTheme } = useMutationAPI();
	const { mutateAsync: deleteTheme } = useMutationAPI();

	const {
		currentTheme,
		setCurrentTheme,
		backgrounds,
		isBackgroundFetched,
		isMobile,
		theme,
		allThemes,
	} = useCommonHooks();

	useEffect(() => {
		if (backgrounds && isBackgroundFetched) {
			setBackgroundList(['None', ...backgrounds]);
		}
	}, [backgrounds, isBackgroundFetched]);

	const handleOpen = (theme: any) => {
		setSelectedTheme(theme);
		open();
	};

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

	const handleSaveTheme = () => {
		createTheme({
			method: selectedTheme.id === undefined ? 'POST' : 'PATCH',
			endpoint: 'api/themes',
			body: selectedTheme,
		});
		close();
	};

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

	const handleDeleteTheme = (theme: any) => {
		openDeleteConfirmModal(theme);
		close();
	};
	return (
		<>
			<ThemeModal
				opened={opened}
				handleClose={handleClose}
				selectedTheme={selectedTheme}
				setSelectedTheme={setSelectedTheme}
				theme={theme}
				setColorId={setColorId}
				colorId={colorId}
				setColorValue={setColorValue}
				openPicker={openPicker}
				backgroundList={backgroundList}
				pickerOpen={pickerOpen}
				colorValue={colorValue}
				closePicker={closePicker}
				handleSaveTheme={handleSaveTheme}
			/>
			<Stack h={'100%'} w={'100%'}>
				<Group w={'100%'} justify='space-between'>
					<Group>
						<Text className={textClasses.settingsSubTitle} classNames={textClasses}>
							Themes
						</Text>
						<Button
							mb={'-1.5em'}
							className={buttonClasses.tableButton}
							classNames={buttonClasses}
							onClick={() => {
								setSelectedTheme({
									id: undefined,
									name: 'default',
									backgroundImage: 'none',
									backgroundColor: '#EEEEEE',
									searchColor: '#00000033',
									primaryColor: '#222222',
									accentColor: '#5c5c5c',
									borderColor: '#5c5c5c',
								});
								open();
							}}
						>
							<FiPlus />
						</Button>
					</Group>
					<Switch
						label={<Text c={theme.primaryColor}>Random Theme</Text>}
						labelPosition='left'
						checked={currentTheme === 'random'}
						onChange={(e) => {
							setCurrentTheme(e.target.checked ? 'random' : theme.name);
						}}
						color={theme.primaryColor}
					/>
				</Group>
				<Group justify='center' align='center' pos={'relative'}>
					<Overlay
						display={currentTheme === 'random' ? 'flex' : 'none'}
						blur={5}
						style={{
							borderRadius: '10px',
							marginTop: '-15px',
							marginBottom: '-10px',
							marginRight: isMobile ? '0' : '50px',
							marginLeft: isMobile ? '0' : '50px',
						}}
						pos={'absolute'}
					/>
					{allThemes?.map((cardTheme: any) => (
						<Group key={cardTheme.name} pos={'relative'}>
							{cardTheme.name === currentTheme && (
								<FiChevronRight
									style={{
										position: 'absolute',
										left: -14,
										zIndex: 1,
										fontSize: '2em',
										fontWeight: 'bold',
										borderRadius: '50%',
										backgroundColor: cardTheme.borderColor,
										color:
											cardTheme.borderColor === cardTheme.primaryColor
												? cardTheme.accentColor
												: cardTheme.primaryColor,
									}}
								/>
							)}
							<Box
								style={{
									zIndex:
										currentTheme === 'random' && cardTheme.name === theme.name ? 200 : 0,
								}}
							>
								<ThemeCard
									cardTheme={cardTheme}
									handleOpen={handleOpen}
									handleDeleteTheme={handleDeleteTheme}
									createTheme={createTheme}
								/>
							</Box>
						</Group>
					))}
				</Group>
			</Stack>
		</>
	);
}
export default ThemesSettings;