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

import {
	Button,
	Card,
	ColorPicker,
	ColorSwatch,
	Divider,
	Group,
	Image,
	Modal,
	Select,
	Stack,
	Text,
	TextInput,
} from '@mantine/core';
import { useCommonHooks } from 'hooks';
import { FiSave, FiX } from 'react-icons/fi';
import { modalClasses, selectClasses, textClasses, textInputClasses } from 'styles';
import ThemeModalContent from './ThemeModalContent';

function ThemeModal({
	opened,
	handleClose,
	selectedTheme,
	setSelectedTheme,
	setColorId,
	colorId,
	setColorValue,
	openPicker,
	backgroundList,
	pickerOpen,
	colorValue,
	closePicker,
	handleSaveTheme,
}: any) {
	const { theme } = useCommonHooks();
	return (
		<Modal.Root
			size={'50%'}
			className={modalClasses.editThemeModal}
			classNames={modalClasses}
			opened={opened}
			onClose={handleClose}
			style={{
				'--color-text-pri': theme.primaryColor,
				'--color-text-acc': theme.accentColor,
				'--color-background': theme.backgroundColor,
				'--color-border': theme.borderColor,
				'--color-search-background': theme.searchColor,
				'--image-background': `url("${theme.backgroundImage}")`,
			}}
		>
			<Modal.Overlay />
			<Modal.Content>
				<Modal.Header>
					<Modal.Title>Edit Theme</Modal.Title>
					<Modal.CloseButton />
				</Modal.Header>
				<Modal.Body p={'2rem'}>
					<ThemeModalContent selectedTheme={selectedTheme} />
					<Divider color='black' my='sm' />
					<TextInput
						className={textInputClasses.default}
						classNames={textInputClasses}
						label='Theme Name'
						value={selectedTheme.name}
						onChange={(e) => setSelectedTheme({ ...selectedTheme, name: e.target.value })}
						styles={{
							label: {
								color: theme.primaryColor,
							},
							input: {
								color: theme.primaryColor,
								border: 'none',
							},
						}}
					/>
					<Divider color='black' my='sm' />
					<Group w={'100%'} h={'100%'} gap={0}>
						<Stack w={'50%'}>
							<Group justify='space-between'>
								<Text className={textClasses.label} classNames={textClasses}>
									Primary Color
								</Text>
								<ColorSwatch
									onClick={() => {
										setColorId('primaryColor');
										openPicker();
										setColorValue(selectedTheme.primaryColor);
									}}
									radius={'sm'}
									w={'100px'}
									color={selectedTheme.primaryColor}
									style={{
										cursor: 'pointer',
										border: `2px dashed ${theme.primaryColor}`,
									}}
								/>
							</Group>
							<Group justify='space-between'>
								<Text className={textClasses.label} classNames={textClasses}>
									Accent Color
								</Text>
								<ColorSwatch
									onClick={() => {
										setColorId('accentColor');
										openPicker();
										setColorValue(selectedTheme.accentColor);
									}}
									radius={'sm'}
									w={'100px'}
									color={selectedTheme.accentColor}
									style={{
										cursor: 'pointer',
										border: `2px dashed ${theme.primaryColor}`,
									}}
								/>
							</Group>
							<Group justify='space-between'>
								<Text className={textClasses.label} classNames={textClasses}>
									Background Color
								</Text>
								<ColorSwatch
									onClick={() => {
										setColorId('background');
										openPicker();
										setColorValue(selectedTheme.backgroundColor);
									}}
									radius={'sm'}
									w={'100px'}
									color={selectedTheme.backgroundColor}
									style={{
										cursor: 'pointer',
										border: `2px dashed ${theme.primaryColor}`,
									}}
								/>
							</Group>
							<Group justify='space-between'>
								<Text className={textClasses.label} classNames={textClasses}>
									Border Color
								</Text>
								<ColorSwatch
									onClick={() => {
										setColorId('borderColor');
										openPicker();
										setColorValue(selectedTheme.borderColor);
									}}
									radius={'sm'}
									w={'100px'}
									color={selectedTheme.borderColor}
									style={{
										cursor: 'pointer',
										border: `2px dashed ${theme.primaryColor}`,
									}}
								/>
							</Group>
							<Group justify='space-between'>
								<Text className={textClasses.label} classNames={textClasses}>
									Search Background Color
								</Text>
								<ColorSwatch
									onClick={() => {
										setColorId('searchBackground');
										openPicker();
										setColorValue(selectedTheme.searchColor);
									}}
									radius={'sm'}
									w={'100px'}
									color={selectedTheme.searchColor}
									style={{
										cursor: 'pointer',
										border: `2px dashed ${theme.primaryColor}`,
									}}
								/>
							</Group>
							<Group justify='space-between'>
								<Select
									w={'100%'}
									data={backgroundList}
									classNames={selectClasses}
									label='Background Image'
									value={
										selectedTheme.backgroundImage === 'none'
											? 'None'
											: selectedTheme.backgroundImage
									}
									renderOption={(value) => {
										return (
											<Group
												h={'50px'}
												w={'100%'}
												justify='space-between'
												style={{
													color: theme.primaryColor,
													backgroundColor: theme.backgroundColor,
													fontSize: '18px',
												}}
											>
												{value.option.value}
												{value.option.value && value.option.value !== 'None' && (
													<Image
														h={'50px'}
														w={'90px'}
														src={`/backgrounds/${value.option.value}`}
													/>
												)}
											</Group>
										);
									}}
									onChange={(value) =>
										setSelectedTheme({
											...selectedTheme,
											backgroundImage: value,
										})
									}
								/>
							</Group>
						</Stack>
						<Stack h={'100%'} w={'50%'} align='center' justify='center'>
							{pickerOpen ? (
								<>
									<ColorPicker value={colorValue} onChange={setColorValue} />
									<Group w={'75%'} justify='space-between'>
										<TextInput
											className={textInputClasses.default}
											classNames={textInputClasses}
											w={'100%'}
											value={colorValue}
											onChange={(e) => setColorValue(e.target.value)}
										/>
										<Group w={'100%'} align='center' justify='center'>
											<Button
												color={'green'}
												onClick={() => {
													switch (colorId) {
														case 'primaryColor':
															setSelectedTheme({
																...selectedTheme,
																primaryColor: colorValue,
															});
															break;
														case 'accentColor':
															setSelectedTheme({
																...selectedTheme,
																accentColor: colorValue,
															});
															break;
														case 'background':
															setSelectedTheme({
																...selectedTheme,
																backgroundColor: colorValue,
															});
															break;
														case 'borderColor':
															setSelectedTheme({
																...selectedTheme,
																borderColor: colorValue,
															});
															break;
														case 'searchBackground':
															setSelectedTheme({
																...selectedTheme,
																searchColor: colorValue,
															});
															break;
													}
													closePicker();
												}}
											>
												<FiSave />
											</Button>
											<Button color={'red'} onClick={closePicker}>
												<FiX />
											</Button>
										</Group>
									</Group>
								</>
							) : (
								<Card bg={'#0002'} h={'100%'} w={'90%'} style={{ alignItems: 'center' }}>
									<Text className={textClasses.label} classNames={textClasses}>
										Pick a swatch to edit the color.
									</Text>
								</Card>
							)}
						</Stack>
					</Group>
					<Divider color='black' my='sm' />
					<Group mt={'2rem'}>
						<Button color={'green'} styles={{ label: { color: 'black' }}} onClick={handleSaveTheme}>
							Save
						</Button>
						<Button color={'red'} styles={{ label: { color: 'black' }}} onClick={handleClose}>
							Cancel
						</Button>
					</Group>
				</Modal.Body>
			</Modal.Content>
		</Modal.Root>
	);
}

export default ThemeModal;