import {
	Box,
	Button,
	Divider,
	Group,
	LoadingOverlay,
	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, toolTipClasses } from 'styles';
import type { Theme, ThemePlaylist } from 'types';
import { BackgroundModal } from '../Backgrounds';
import { ThemeCard } from './ThemeCard';
import { ThemeModal } from './ThemeModal';

export function Themes() {
	const { settings, updateSetting, theme, isMobile } = useCommonHooks();
	const backgroundsEndpoint = 'api/backgrounds';
	const { data: allThemeData, isFetching: allThemeDataIsFetching } = useQueryAPI({
		endpoint: 'api/themes',
	});
	const [searchValue, setSearchValue] = useState<string | number>('');
	const [debouncedSearch] = useDebouncedValue(searchValue, 500);
	const allThemes: Theme[] = allThemeData
		?.filter((a: Theme) =>
			a.name.toLowerCase().includes((debouncedSearch as string).toLowerCase()),
		)
		.sort((a: Theme, b: Theme) => {
			switch (settings.themesSettingsSort) {
				case 'A>Z':
					return a.name.toLocaleLowerCase() > b.name.toLocaleLowerCase() ? 1 : -1;
				case 'Z>A':
					return a.name.toLocaleLowerCase() < b.name.toLocaleLowerCase() ? 1 : -1;
				case 'Newest':
					if (a.id && b.id) {
						return a.id < b.id ? 1 : -1;
					}
					return -1;
				case 'Oldest':
					if (a.id && b.id) {
						return a.id > b.id ? 1 : -1;
					}
					return -1;
				default:
					return 0;
			}
		});
	const { data: backgroundData, isFetching: backgroundDataIsFetching } = useQueryAPI({
		endpoint: backgroundsEndpoint,
	});
	const { data: themePlaylistData } = useQueryAPI({
		endpoint: 'api/themePlaylists',
	});
	const themePlaylists: ThemePlaylist[] = themePlaylistData || [];
	const [themeModalOpened, { open: openThemeModal, close: closeThemeModal }] =
		useDisclosure(false);
	const [
		backgroundModalOpened,
		{ open: openBackgroundModal, close: closeBackgroundModal },
	] = useDisclosure(false);
	const backgroundList = backgroundData
		? ['None', ...backgroundData.sort((a: string, b: string) => a.localeCompare(b))]
		: ['None'];
	const inUseBackgrounds: string[] = [
		...new Set(
			allThemes
				?.filter((t) => {
					if (t.backgroundImage !== 'none') {
						return t.backgroundImage;
					}
					return undefined;
				})
				.map((t) => t.backgroundImage),
		),
	] as 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,
		themeFont: settings.defaultFont,
	});
	const [isLoading, setIsLoading] = useState(false);
	const [isNew, setIsNew] = useState(false);
	const navigate = useNavigate();

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

	useEffect(() => {
		if (debouncedSearch === searchValue) {
			setIsLoading(false);
		}
	}, [debouncedSearch]);

	return (
		<Stack>
			{themeModalOpened && (
				<ThemeModal
					opened={themeModalOpened}
					selectedTheme={selectedTheme}
					setSelectedTheme={setSelectedTheme}
					backgroundList={backgroundList}
					isNew={isNew}
					setIsNew={setIsNew}
					allThemes={allThemes}
					closeThemeModal={closeThemeModal}
					themePlaylists={themePlaylists}
				/>
			)}
			{backgroundModalOpened && (
				<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', 'playlists'],
					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.\n\nThemes can also have custom fonts that will override the user default found on the Personalization page.',
				}}
				searchValue={searchValue}
				setSearchValue={setSearchValue}
				searchPlaceholder={'Search Themes...'}
				isLoading={isLoading}
				setIsLoading={setIsLoading}
				sortBy={settings.themesSettingsSort}
				setSortBy={(value) => {
					updateSetting('themesSettingsSort', value);
				}}
				customSearchEnabled={false}
			/>
			<Stack mt={isMobile ? '11rem' : '7rem'} align='center'>
				<LoadingOverlay
					visible={allThemeDataIsFetching || backgroundDataIsFetching}
					zIndex={180}
					overlayProps={{ blur: 5 }}
					loaderProps={{
						color: 'var(--mantine-color-primary-0)',
						type: 'bars',
						size: 'xl',
					}}
				/>
				<Group
					w={'85%'}
					justify='center'
					pos={'relative'}
					mb={isMobile ? '10rem' : '7.5rem'}
				>
					<Overlay
						display={
							settings.theme === '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 === settings.theme && (
									<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:
											settings.theme === 'random' &&
											(themePlaylists
												.find(
													(t: ThemePlaylist) =>
														t.name.toLowerCase() ===
														settings.currentThemePlaylist.toLowerCase(),
												)
												?.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={{ 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',
								}}
							>
								{settings.currentThemePlaylist === 'All'
									? 'All'
									: settings.currentThemePlaylist}
							</Text>
						</Group>
						<Divider
							orientation='vertical'
							size={'xs'}
							color={'var(--mantine-color-primary-0)'}
						/>
						<Button
							onClick={() => {
								if (settings.currentThemePlaylist === 'All') {
									void navigate(
										`/${import.meta.env.VITE_BASE_URL}/settings/themePlaylists`,
									);
								} else {
									updateSetting('currentThemePlaylist', 'All');
									updateSetting('theme', theme.name);
								}
							}}
							style={{
								aspectRatio: isMobile ? 1 : undefined,
								padding: isMobile ? 0 : undefined,
							}}
						>
							{settings.currentThemePlaylist === 'All' ? (
								isMobile ? (
									<FiMousePointer />
								) : (
									'Select Playlist'
								)
							) : isMobile ? (
								<FiStopCircle />
							) : (
								'Disable Playlist'
							)}
						</Button>
						<Tooltip
							className={toolTipClasses.default}
							classNames={toolTipClasses}
							label='Shuffle is always on when a playlist is active.'
							disabled={settings.currentThemePlaylist === 'All'}
						>
							<Group>
								<Switch
									disabled={settings.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={settings.theme === 'random'}
									onChange={(e) => {
										updateSetting('theme', e.target.checked ? 'random' : theme.name);
										updateSetting('currentThemePlaylist', '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>
	);
}