import { ActionIcon, Box, Button, Group, Overlay, Stack, Text } from '@mantine/core';
import { useDisclosure, useElementSize } from '@mantine/hooks';
import { useCommonHooks, useMutationAPI } from 'hooks';
import { useState } from 'react';
import { FiEdit, FiShuffle, FiTrash, FiX } from 'react-icons/fi';
import { actionIconClasses, boxClasses } from 'styles';
import type { Theme, ThemePlaylist } from 'types';
import DeleteItemModal from '../Shared/DeleteItemModal';

function ThemeCard({
	cardTheme,
	handleOpen,
	allThemes,
	themePlaylists,
}: {
	cardTheme: Theme;
	handleOpen: (cardTheme: Theme) => void;
	allThemes: Theme[];
	themePlaylists: ThemePlaylist[];
}) {
	const { ref, width } = useElementSize();
	const [hover, setHover] = useState(false);
	const [shiftEdit, setShiftEdit] = useState<number>(0);
	const [shiftShuffle, setShiftShuffle] = useState<number>(0);
	const { mutateAsync } = useMutationAPI();
	const [modalOpened, { open: openModal, close: closeModal }] = useDisclosure(false);
	const {
		handleThemeChange,
		currentTheme,
		setCurrentTheme,
		theme,
		currentThemePlaylist,
		setCurrentThemePlaylist,
		handleDelete,
	} = useCommonHooks();

	return (
		<Group
			gap={0}
			align='center'
			justify='center'
			display={'grid'}
			pos={'relative'}
			onMouseEnter={() => setHover(true)}
			onMouseLeave={() => setHover(false)}
		>
			<DeleteItemModal
				modalOpened={modalOpened}
				handleClose={closeModal}
				handleDelete={() => handleDelete(cardTheme, 'api/themes')}
				title={'Delete Theme'}
				body={
					<Stack gap={0} w={'100%'} h={'150px'} align='center'>
						<Text>Are you sure you want to delete this theme?</Text>
						<Text
							style={{
								fontWeight: 'bold',
								fontSize: '1.25rem',
								padding: '.5rem',
								margin: '.5rem',
								borderRadius: '10px',
								backgroundColor: 'var(--mantine-color-accent-0)',
								color: 'var(--mantine-color-background-0)',
							}}
						>{`"${cardTheme.name}"`}</Text>
						<Text c='red'>This action cannot be undone!</Text>
					</Stack>
				}
			/>
			<Text
				style={{
					position: 'absolute',
					top: -10,
					left: 6,
					paddingRight: '.25rem',
					paddingLeft: '.25rem',
					backgroundColor: cardTheme.backgroundColor,
					borderRadius: '4px',
					color:
						cardTheme.borderColor === cardTheme.primaryColor
							? cardTheme.accentColor
							: cardTheme.primaryColor,
					zIndex: 3,
					boxShadow: `2px -2px ${cardTheme.borderColor}`,
					textOverflow: 'ellipsis',
					overflow: 'hidden',
					whiteSpace: 'nowrap',
					maxWidth: width,
				}}
			>
				{cardTheme.name}
			</Text>
			<Button
				ref={ref}
				w={'275px'}
				h={'115px'}
				disabled={currentTheme === 'random'}
				style={{
					backgroundImage:
						cardTheme?.backgroundImage.toLocaleLowerCase() !== 'none'
							? `linear-gradient(${cardTheme?.backgroundColor}33, ${cardTheme?.backgroundColor}33), url(../../api/backgroundImages/${cardTheme?.backgroundImage})`
							: undefined,
					backgroundSize:
						cardTheme?.backgroundImage.toLocaleLowerCase() !== 'none'
							? 'cover'
							: undefined,
					backgroundColor:
						cardTheme?.backgroundImage.toLocaleLowerCase() === 'none'
							? cardTheme?.backgroundColor
							: undefined,
					backgroundPosition: 'center',
					border: `solid ${cardTheme.borderColor}`,
					filter: cardTheme.randomEnabled === 0 ? 'saturate(0)' : undefined,
				}}
				onClick={() => {
					setCurrentTheme(cardTheme.name);
					setCurrentThemePlaylist('All');
				}}
			>
				{hover && currentTheme !== 'random' && <Overlay opacity={0.5} zIndex={1} />}
				<Group w={'100%'} gap={0} display={'flex'} align='center' justify='center'>
					<Stack align='center'>
						<Box
							style={{
								height: '10px',
								width: '100px',
								backgroundColor: cardTheme.searchColor,
								borderRadius: '4px',
								borderBottom: `solid 1px ${cardTheme.borderColor}`,
							}}
						/>
						<Group justify='space-between'>
							<Box
								style={{
									height: '.5rem',
									width: '100px',
									backgroundColor: cardTheme.accentColor,
									borderRadius: '4px',
								}}
							/>
							<Box
								style={{
									height: '.5rem',
									width: '50px',
									backgroundColor: cardTheme.primaryColor,
									borderRadius: '4px',
								}}
							/>
						</Group>
						<Group w={'100%'}>
							<Box
								style={{
									height: '.25rem',
									width: '40px',
									backgroundColor: cardTheme.primaryColor,
									borderRadius: '4px',
								}}
							/>
						</Group>
						<Group w={'100%'}>
							<Box
								className={boxClasses.appItemExampleText}
								style={{
									color: cardTheme.primaryColor,
								}}
							>
								lorem ipsum
							</Box>
							<Box
								className={boxClasses.appItemExampleText}
								style={{
									color: cardTheme.primaryColor,
								}}
							>
								lorem ipsum
							</Box>
							<Box
								className={boxClasses.appItemExampleText}
								style={{
									color: cardTheme.primaryColor,
								}}
							>
								lorem ipsum
							</Box>
						</Group>
					</Stack>
				</Group>
			</Button>
			{currentTheme === 'random' && cardTheme.name === theme.name ? (
				<Group>
					<Group
						onMouseEnter={() => {
							setShiftEdit(2);
						}}
						onMouseLeave={() => {
							setShiftEdit(0);
						}}
						onClick={() => {
							handleOpen(cardTheme);
						}}
						gap={0}
						style={{
							zIndex: 300,
							position: 'absolute',
							left: 0,
							top: 27 - shiftEdit,
							backgroundColor:
								shiftEdit === 0 ? 'white' : 'var(--mantine-color-background-0)',
							borderRadius: '50%',
							padding: '.5rem',
							margin: '.25rem',
							border: 'solid 2px',
							borderColor: shiftEdit === 0 ? 'black' : 'var(--mantine-color-primary-0)',
							transition: 'all 0.2s',
						}}
					>
						<FiEdit
							style={{
								fontSize: '2rem',
								fontWeight: 'bold',
								color: shiftEdit === 0 ? 'black' : 'var(--mantine-color-primary-0)',
								cursor: 'pointer',
							}}
						/>
					</Group>
					<Group
						onMouseEnter={() => {
							setShiftShuffle(2);
						}}
						onMouseLeave={() => {
							setShiftShuffle(0);
						}}
						onClick={() => {
							if (currentThemePlaylist === 'All') {
								handleThemeChange(allThemes, false);
							} else if (currentThemePlaylist === 'Backgrounds') {
								handleThemeChange(
									allThemes.filter(
										(a: any) => !a.backgroundImage.toLowerCase().includes('none'),
									),
									false,
								);
							} else if (currentThemePlaylist === 'No Backgrounds') {
								handleThemeChange(
									allThemes.filter((a: any) =>
										a.backgroundImage.toLowerCase().includes('none'),
									),
									false,
								);
							} else {
								const themeList = JSON.parse(
									themePlaylists?.find(
										(t: ThemePlaylist) => t?.name === currentThemePlaylist,
									)?.themeList ?? '[]',
								);
								const filteredThemes = allThemes.filter((t: Theme) =>
									themeList.includes(t.id),
								);
								handleThemeChange(filteredThemes, false);
							}
						}}
						gap={0}
						style={{
							zIndex: 300,
							position: 'absolute',
							right: 0,
							top: 27 - shiftShuffle,
							backgroundColor:
								shiftShuffle === 0 ? 'white' : 'var(--mantine-color-background-0)',
							borderRadius: '50%',
							padding: '.5rem',
							margin: '.25rem',
							border: 'solid 2px',
							borderColor:
								shiftShuffle === 0 ? 'black' : 'var(--mantine-color-primary-0)',
							transition: 'all 0.2s',
						}}
					>
						<FiShuffle
							style={{
								fontSize: '2rem',
								fontWeight: 'bold',
								color: shiftShuffle === 0 ? 'black' : 'var(--mantine-color-primary-0)',
								cursor: 'pointer',
							}}
						/>
					</Group>
				</Group>
			) : (
				<Stack
					gap={0}
					style={{
						zIndex: 2,
						padding: '.25rem',
						paddingRight: 0,
						position: 'absolute',
						right: 3,
						backgroundColor: '#ffffff88',
						borderTopLeftRadius: '10px',
						borderBottomLeftRadius: '10px',
					}}
					align='center'
					justify='center'
					display={
						currentTheme === 'random' && cardTheme.name === theme.name ? 'none' : 'flex'
					}
				>
					<ActionIcon
						style={{
							background: cardTheme.randomEnabled
								? 'rgba(255,255,255,1)'
								: 'rgba(255,255,255,0.5)',
							margin: '.125rem',
						}}
						styles={{
							root: {
								height: '10px',
								width: '10px',
							},
							icon: {
								height: '20px',
								width: '20px',
								fontSize: '1.5rem',
								margin: 0,
								padding: 0,
							},
						}}
						onClick={() => {
							mutateAsync({
								method: 'PATCH',
								endpoint: 'api/themes',
								body: { ...cardTheme, randomEnabled: !cardTheme.randomEnabled },
							});
						}}
					>
						{cardTheme.randomEnabled ? <FiShuffle color='green' /> : <FiX color='red' />}
					</ActionIcon>
					<ActionIcon
						className={actionIconClasses.themeEditButton}
						classNames={actionIconClasses}
						onClick={() => handleOpen(cardTheme)}
						mb={'.125rem'}
					>
						<FiEdit color='green' />
					</ActionIcon>
					<ActionIcon
						className={actionIconClasses.themeEditButton}
						classNames={actionIconClasses}
						onClick={openModal}
						disabled={cardTheme.name === theme.name}
					>
						<FiTrash color='red' />
					</ActionIcon>
				</Stack>
			)}
		</Group>
	);
}

export default ThemeCard;