import { Button, Group, Modal, SimpleGrid, Text, TextInput } from '@mantine/core';
import { useCommonHooks } from 'hooks';
import { useEffect, useState } from 'react';
import { modalClasses, textInputClasses } from 'styles';
import type { Theme, ThemePlaylist } from 'types';
import ThemePreviewMiddleware from './ThemePreivewMiddleware';
import TimeOfDay from './TimeOfDay';

function ThemePlaylistModal({
	opened,
	handleClose,
	createPlaylist,
	selectedPlaylist,
	defaultPlaylist,
	setSelectedPlaylist,
	handleSavePlaylist,
	allThemes,
}: {
	opened: boolean;
	handleClose: () => void;
	createPlaylist: any;
	selectedPlaylist: ThemePlaylist;
	defaultPlaylist: ThemePlaylist;
	setSelectedPlaylist: (selectedPlaylist: ThemePlaylist) => void;
	handleSavePlaylist: () => void;
	allThemes: Theme[];
}) {
	const { isMobile } = useCommonHooks();
	const [themeList, setThemeList] = useState<any>([]);

	useEffect(() => {
		if (selectedPlaylist?.themeList) {
			setThemeList(JSON.parse(selectedPlaylist?.themeList));
		}
	}, [selectedPlaylist]);

	if (selectedPlaylist?.name === undefined) {
		setSelectedPlaylist(defaultPlaylist);
	}

	return (
		<Modal.Root
			size={'50%'}
			className={modalClasses.editThemeModal}
			classNames={modalClasses}
			opened={opened}
			fullScreen={isMobile}
			centered
			onClose={() => {
				handleClose();
				setThemeList('[]');
			}}
		>
			<Modal.Overlay />
			<Modal.Content>
				<Modal.Header style={{ justifyContent: 'center' }}>
					<Group pos={'absolute'}>
						<Text c={'var(--mantine-color-background-0)'}>Name:</Text>
						<TextInput
							className={textInputClasses.default}
							classNames={textInputClasses}
							value={selectedPlaylist?.name}
							disabled={selectedPlaylist?.name === 'Time of Day'}
							onChange={(e) =>
								setSelectedPlaylist({ ...selectedPlaylist, name: e.target.value })
							}
							styles={{
								label: {
									color: 'var(--mantine-color-primary-0)',
								},
								input: {
									color: 'var(--mantine-color-primary-0)',
									border: 'none',
									borderBottom: '1px solid var(--mantine-color-primary-0)',
								},
							}}
						/>
					</Group>
					<Modal.CloseButton />
				</Modal.Header>
				<Modal.Body pt={'.5rem'}>
					{selectedPlaylist?.name === 'Time of Day' ? (
						<TimeOfDay
							createPlaylist={createPlaylist}
							themeList={themeList}
							allThemes={allThemes}
							selectedPlaylist={selectedPlaylist}
						/>
					) : (
						<>
							<SimpleGrid cols={3}>
								{selectedPlaylist?.name !== 'Time of Day' &&
									allThemes?.map((miniTheme: Theme) => {
										const newThemeList = themeList;
										return (
											<ThemePreviewMiddleware
												key={miniTheme.id}
												newThemeList={newThemeList}
												miniTheme={miniTheme}
												themeList={themeList}
												allThemes={allThemes}
												selectedPlaylist={selectedPlaylist}
												setSelectedPlaylist={setSelectedPlaylist}
											/>
										);
									})}
							</SimpleGrid>
							<Group mt={'1rem'}>
								<Button color={'green'} onClick={handleSavePlaylist}>
									Save
								</Button>
								<Button
									color={'red'}
									styles={{ label: { color: 'black' } }}
									onClick={() => {
										handleClose();
										setThemeList('[]');
										setSelectedPlaylist(defaultPlaylist);
									}}
								>
									Cancel
								</Button>
							</Group>
						</>
					)}
				</Modal.Body>
			</Modal.Content>
		</Modal.Root>
	);
}

export default ThemePlaylistModal;