146 lines
3.6 KiB
TypeScript
146 lines
3.6 KiB
TypeScript
import {
|
|
Button,
|
|
Divider,
|
|
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 style={{ backdropFilter: 'blur(5px)' }} />
|
|
<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>
|
|
<Divider color='black' my='sm' />
|
|
<Group>
|
|
<Button
|
|
color={'green'}
|
|
styles={{ label: { color: 'black' } }}
|
|
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;
|