import { Box, Button, Group, Overlay, Stack, Switch, Text, Tooltip } from '@mantine/core';
import { useDebouncedValue, useDisclosure } from '@mantine/hooks';
import { useCommonHooks, useMutationAPI, useQueryAPI } from 'hooks';
import { useEffect, useState } from 'react';
import { FaDice } from 'react-icons/fa';
import { FiChevronRight } from 'react-icons/fi';
import { useNavigate } from 'react-router-dom';
import { switchClasses, textClasses } from 'styles';
import type { Theme, ThemePlaylist } from 'types';
import NoItemsFound from '../Shared/NoItemsFound';
import SettingsHeader from '../Shared/SettingsHeader';
import ThemeCard from './ThemeCard';
import ThemeModal from './ThemeModal';

function ThemesSettings() {
	const themesEndpoint = 'api/themes';
	const backgroundsEndpoint = 'api/backgrounds';
	const { data: allThemeData, isFetched: isAllThemeDataFetched } = useQueryAPI({
		endpoint: 'api/themes',
	});
	const [allThemes, setAllThemes] = useState<Theme[]>([]);
	const { data: backgroundData, isFetched: isBackgroundFetched } = useQueryAPI({
		endpoint: backgroundsEndpoint,
	});
	const { data: themePlaylistData } = useQueryAPI({
		endpoint: 'api/themePlaylists',
	});
	const [themePlaylists, setThemePlaylists] = useState<ThemePlaylist[]>([]);
	const { mutateAsync } = useMutationAPI();
	const [opened, { open, close }] = useDisclosure(false);
	const [colorId, setColorId] = useState<string>('');
	const [colorValue, setColorValue] = useState('#000000');
	const [backgroundList, setBackgroundList] = useState<string[]>(['None']);
	const [selectedTheme, setSelectedTheme] = useState<Theme>({
		id: undefined,
		name: 'default',
		backgroundImage: 'none',
		backgroundColor: '#EEEEEE',
		searchColor: '#00000033',
		primaryColor: '#222222',
		accentColor: '#5c5c5c',
		borderColor: '#5c5c5c',
		randomEnabled: 0,
	});
	const [pickerOpen, { open: openPicker, close: closePicker }] = useDisclosure(false);
	const [searchValue, setSearchValue] = useState('');
	const [debouncedSearch] = useDebouncedValue(searchValue, 500);
	const [isLoading, setIsLoading] = useState(false);
	const navigate = useNavigate();
	const {
		currentTheme,
		setCurrentTheme,
		theme,
		isMobile,
		currentThemePlaylist,
		setCurrentThemePlaylist,
	} = useCommonHooks();
	const handleOpen = (theme: Theme) => {
		setSelectedTheme(theme);
		open();
	};

	const handleClose = () => {
		close();
		closePicker();
		setSelectedTheme({
			id: undefined,
			name: 'default',
			backgroundImage: 'none',
			backgroundColor: '#EEEEEE',
			searchColor: '#00000033',
			primaryColor: '#222222',
			accentColor: '#5c5c5c',
			borderColor: '#5c5c5c',
			randomEnabled: 0,
		});
	};

	const handleSaveTheme = () => {
		mutateAsync({
			method: selectedTheme?.id === undefined ? 'POST' : 'PATCH',
			endpoint: themesEndpoint,
			body: selectedTheme,
		});
		close();
	};

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

	useEffect(() => {
		if (themePlaylistData) {
			setThemePlaylists(themePlaylistData);
		}
	}, [themePlaylistData]);

	useEffect(() => {
		if (allThemeData && isAllThemeDataFetched) {
			setAllThemes(
				allThemeData.filter((a: Theme) =>
					a.name.toLowerCase().includes(debouncedSearch.toLowerCase()),
				),
			);
		}
		if (debouncedSearch === searchValue) {
			setIsLoading(false);
		}
	}, [allThemeData, isAllThemeDataFetched, debouncedSearch]);
	return (
		<Stack w={'100%'} align='center'>
			<ThemeModal
				opened={opened}
				handleClose={handleClose}
				selectedTheme={selectedTheme}
				setSelectedTheme={setSelectedTheme}
				setColorId={setColorId}
				colorId={colorId}
				setColorValue={setColorValue}
				openPicker={openPicker}
				backgroundList={backgroundList}
				pickerOpen={pickerOpen}
				colorValue={colorValue}
				closePicker={closePicker}
				handleSaveTheme={handleSaveTheme}
			/>
			<SettingsHeader
				setDragging={undefined}
				openModal={open}
				title={'Themes'}
				tooltip={{
					title: 'Themes can be created here and applied to the homepage.',
					highlightList: ['theme', 'themes', 'homepage', 'playlist'],
					description:
						'Themes are combinations of 5 colors and a background image, and can be added to a playlist. If a theme has been disabled, it will only be disabled with random/shuffle is enabled. If a theme is part of a playlist, it will appear while the playlist is active, regardless of random/shuffle.',
				}}
				searchValue={searchValue}
				setSearchValue={setSearchValue}
				searchPlaceholder={'Search Themes...'}
				isLoading={isLoading}
				setIsLoading={setIsLoading}
			/>
			<Group
				w={'85%'}
				justify='center'
				align='center'
				pos={'relative'}
				mt={isMobile ? '11.5rem' : '7rem'}
				mb={isMobile ? '12rem' : '6.5rem'}
			>
				<Overlay
					display={currentTheme === 'random' && debouncedSearch === '' ? 'flex' : 'none'}
					blur={5}
					style={{
						zIndex: 190,
						borderRadius: '10px',
						marginTop: '-1rem',
						marginBottom: '-1.25rem',
						boxShadow: '0px 0px 10px 3px rgba(0, 0, 0, .8)',
					}}
					pos={'absolute'}
				/>
				{allThemes.length > 0 ? (
					allThemes.map((cardTheme: Theme) => (
						<Group key={cardTheme.name} pos={'relative'}>
							{cardTheme.name === currentTheme && (
								<FiChevronRight
									style={{
										position: 'absolute',
										left: -14,
										zIndex: 1,
										fontSize: '2rem',
										fontWeight: 'bold',
										borderRadius: '50%',
										backgroundColor: cardTheme.borderColor,
										color:
											cardTheme.borderColor === cardTheme.primaryColor
												? cardTheme.accentColor
												: cardTheme.primaryColor,
									}}
								/>
							)}
							<Box
								style={{
									zIndex:
										currentTheme === 'random' &&
										(themePlaylists
											.filter(
												(t: ThemePlaylist) =>
													t.name.toLowerCase() === currentThemePlaylist.toLowerCase(),
											)[0]
											?.themeList.includes(`${cardTheme.id}`) ||
											cardTheme.name === theme.name)
											? 195
											: 0,
								}}
							>
								<ThemeCard
									allThemes={allThemeData}
									cardTheme={cardTheme}
									handleOpen={handleOpen}
									themePlaylists={themePlaylists}
								/>
							</Box>
						</Group>
					))
				) : (
					<Group
						w={'100%'}
						style={{ zIndex: 1000, display: 'flex', justifyContent: 'center' }}
					>
						<NoItemsFound />
					</Group>
				)}
			</Group>
			<Group
				align='center'
				justify='center'
				style={{
					backdropFilter: 'blur(10px) brightness(.75)',
					zIndex: 199,
					paddingTop: isMobile ? '.5rem' : '1.5rem',
					paddingBottom: '1.5rem',
					paddingLeft: '1rem',
					paddingRight: '1rem',
					height: 'min-content',
					width: '100%',
					marginTop: 0,
					position: 'absolute',
					bottom: isMobile ? '3.25rem' : 0,
				}}
			>
				<Group w={isMobile ? undefined : '100%'}>
					<Text
						miw={isMobile ? 100 : undefined}
						className={textClasses.settingsSubTitle}
						classNames={textClasses}
					>
						Current Settings:
					</Text>
					<Group pos={isMobile ? undefined : 'absolute'} w={'100%'} justify='center'>
						<Group align='center' justify='center'>
							<Text
								style={{
									color: 'var(--mantine-color-accent-0)',
									fontWeight: 'bold',
								}}
							>
								Active Playlist:
							</Text>
							<Text
								style={{
									color: 'var(--mantine-color-primary-0)',
									fontWeight: 'bold',
									fontSize: '1.2rem',
								}}
							>
								{currentThemePlaylist === 'All' ? 'All' : currentThemePlaylist}
							</Text>
						</Group>
						<Button
							onClick={() => {
								if (currentThemePlaylist === 'All') {
									navigate(`/${import.meta.env.VITE_BASE_URL}/settings/themePlaylists`);
								} else {
									setCurrentThemePlaylist('All');
									setCurrentTheme(theme.name);
								}
							}}
						>
							{currentThemePlaylist === 'All' ? 'Select Playlist' : 'Disable Playlist'}
						</Button>
						<Tooltip
							label='Shuffle is always on when a playlist is active.'
							c={'var(--mantine-color-primary-0)'}
							bg={'var(--mantine-color-background-0)'}
							disabled={currentThemePlaylist === 'All'}
						>
							<Group>
								<Switch
									disabled={currentThemePlaylist !== 'All'}
									label={
										isMobile ? (
											<FaDice size={20} color={'var(--mantine-color-primary-0)'} />
										) : (
											<Text c={'var(--mantine-color-primary-0)'}>Shuffle Enabled</Text>
										)
									}
									labelPosition='left'
									checked={currentTheme === 'random'}
									onChange={(e) => {
										setCurrentTheme(e.target.checked ? 'random' : theme.name);
										setCurrentThemePlaylist('All');
									}}
									className={switchClasses.default}
									classNames={switchClasses}
									style={{
										zIndex: 250,
									}}
								/>
							</Group>
						</Tooltip>
					</Group>
				</Group>
			</Group>
		</Stack>
	);
}
export default ThemesSettings;