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

export function 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 [themeModalOpened, { open: openThemeModal, close: closeThemeModal }] =
		useDisclosure(false);
	const [
		backgroundModalOpened,
		{ open: openBackgroundModal, close: closeBackgroundModal },
	] = useDisclosure(false);
	const [backgroundList, setBackgroundList] = useState<string[]>(['None']);
	const [inUseBackgrounds, setInUseBackgrounds] = useState<string[]>([]);
	const [selectedTheme, setSelectedTheme] = useState<Theme>({
		id: undefined,
		name: 'default',
		backgroundImage: 'none',
		backgroundColor: '#EEEEEE',
		searchColor: '#00000033',
		primaryColor: '#222222',
		accentColor: '#5c5c5c',
		borderColor: '#5c5c5c',
		randomEnabled: 1,
		textShadowsEnabled: 0,
		appShadowsEnabled: 0,
	});
	const [searchValue, setSearchValue] = useState('');
	const [debouncedSearch] = useDebouncedValue(searchValue, 500);
	const [isLoading, setIsLoading] = useState(false);
	const [isNew, setIsNew] = useState(false);
	const navigate = useNavigate();
	const {
		currentTheme,
		setCurrentTheme,
		theme,
		isMobile,
		currentThemePlaylist,
		setCurrentThemePlaylist,
	} = useCommonHooks();

	const handleNewTheme = () => {
		setIsNew(true);
		openThemeModal();
	};

	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]);

	useEffect(() => {
		if (allThemes) {
			setInUseBackgrounds([
				...new Set(
					allThemes
						.filter((t) => {
							if (t.backgroundImage !== 'none') {
								return t.backgroundImage;
							}
							return undefined;
						})
						.map((t) => t.backgroundImage),
				),
			]);
		}
	}, [allThemes]);

	return (
		<Stack>
			<ThemeModal
				opened={themeModalOpened}
				selectedTheme={selectedTheme}
				setSelectedTheme={setSelectedTheme}
				backgroundList={backgroundList}
				isNew={isNew}
				setIsNew={setIsNew}
				allThemes={allThemes}
				closeThemeModal={closeThemeModal}
				themePlaylists={themePlaylists}
			/>
			<BackgroundModal
				backgroundModalOpened={backgroundModalOpened}
				closeModal={closeBackgroundModal}
				backgroundList={backgroundList}
				inUseBackgrounds={inUseBackgrounds}
			/>
			<SettingsHeader
				setDragging={undefined}
				openModal={handleNewTheme}
				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}
			/>
			<Stack mt={isMobile ? '11rem' : '7rem'} align='center'>
				<Group
					w={'85%'}
					justify='center'
					pos={'relative'}
					mb={isMobile ? '10rem' : '7.5rem'}
				>
					<Overlay
						display={
							currentTheme === 'random' && debouncedSearch === '' ? 'flex' : 'none'
						}
						blur={5}
						style={{
							zIndex: 190,
							borderRadius: '10px',
							marginTop: '-1rem',
							marginBottom: '-1rem',
							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}
										themePlaylists={themePlaylists}
										setSelectedTheme={setSelectedTheme}
										openThemeModal={openThemeModal}
									/>
								</Box>
							</Group>
						))
					) : (
						<Group
							w={'100%'}
							style={{ zIndex: 1000, display: 'flex', justifyContent: 'center' }}
						>
							<NoItemsFound />
						</Group>
					)}
				</Group>
			</Stack>
			<Group
				style={{
					backdropFilter: 'blur(5px) brightness(.75)',
					zIndex: 199,
					paddingTop: '.5rem',
					paddingBottom: '.5rem',
					paddingLeft: '1rem',
					paddingRight: '1rem',
					width: '100%',
					position: 'absolute',
					bottom: isMobile ? '3.25rem' : 0,
				}}
			>
				<Group w={'100%'} justify={isMobile ? 'center' : 'space-between'}>
					<Text
						w={'fit-content'}
						className={textClasses.settingsSubTitle}
						classNames={textClasses}
						fz={isMobile ? '1rem' : undefined}
						style={
							isMobile
								? {
										position: 'absolute',
										top: -16,
										left: 4,
										padding: '.25rem',
										backgroundColor: 'var(--mantine-color-background-0)',
										backdropFilter: 'blur(5px) brightness(.25)',
										borderRadius: '10px',
										boxShadow: '2px -2px var(--mantine-color-accent-0)',
									}
								: undefined
						}
					>
						Current Settings:
					</Text>
					<Group
						style={{
							backgroundColor: 'var(--mantine-color-search-0)',
							borderRadius: '8px',
							paddingTop: '.5rem',
							paddingBottom: '.5rem',
							paddingLeft: '1rem',
							paddingRight: '1rem',
						}}
					>
						<Group>
							<Text
								style={{
									color: 'var(--mantine-color-primary-0)',
									fontWeight: 'bold',
								}}
							>
								Active Playlist:
							</Text>
							<Text
								style={{
									color: 'var(--mantine-color-primary-0)',
									fontWeight: 'bold',
									fontSize: isMobile ? '.8rem' : '1.2rem',
								}}
							>
								{currentThemePlaylist === 'All' ? 'All' : currentThemePlaylist}
							</Text>
						</Group>
						<Divider
							orientation='vertical'
							size={'xs'}
							color={'var(--mantine-color-primary-0)'}
						/>
						<Button
							onClick={() => {
								if (currentThemePlaylist === 'All') {
									navigate(`/${import.meta.env.VITE_BASE_URL}/settings/themePlaylists`);
								} else {
									setCurrentThemePlaylist('All');
									setCurrentTheme(theme.name);
								}
							}}
							style={{
								aspectRatio: isMobile ? 1 : undefined,
								padding: isMobile ? 0 : undefined,
							}}
						>
							{currentThemePlaylist === 'All' ? (
								isMobile ? (
									<FiMousePointer />
								) : (
									'Select Playlist'
								)
							) : isMobile ? (
								<FiStopCircle />
							) : (
								'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>
					<Button
						style={{
							zIndex: 200,
							aspectRatio: isMobile ? 1 : undefined,
							padding: isMobile ? 0 : undefined,
						}}
						onClick={() => {
							openBackgroundModal();
						}}
					>
						{isMobile ? <FiEdit /> : 'Manage Backgrounds'}
					</Button>
				</Group>
			</Group>
		</Stack>
	);
}