import {
	ActionIcon,
	Button,
	Group,
	Highlight,
	Popover,
	Stack,
	Switch,
	Text,
} from '@mantine/core';
import { useCommonHooks } from 'hooks';
import { useState } from 'react';
import { FiHelpCircle, FiLoader, FiPlus, FiX } from 'react-icons/fi';
import {
	actionIconClasses,
	buttonClasses,
	popoverClasses,
	switchClasses,
	textClasses,
	textInputClasses,
} from 'styles';
import { DebouncedInput } from './DebouncedInput';

export function SettingsHeader({
	setDragging,
	openModal,
	title,
	tooltip,
	searchValue,
	setSearchValue,
	searchPlaceholder,
	isLoading,
	setIsLoading,
}: {
	setDragging: undefined | ((dragging: boolean) => void);
	openModal: undefined | (() => void);
	title: string;
	tooltip: {
		title: string;
		highlightList: string[];
		description: string;
	};
	searchValue: string | number | undefined;
	setSearchValue: (searchValue: string | number) => void;
	searchPlaceholder: string | undefined;
	isLoading: boolean;
	setIsLoading: (isLoading: boolean) => void;
}) {
	const { isMobile, theme } = useCommonHooks();
	const [disabled, setDisabled] = useState(false);
	return (
		<Group
			align='center'
			justify='center'
			style={{
				backdropFilter: 'blur(5px) brightness(.75)',
				zIndex: 199,
				paddingTop: '1.5rem',
				paddingBottom: '1.5rem',
				paddingLeft: '1rem',
				height: 'min-content',
				width: '100%',
				marginTop: 0,
				position: 'absolute',
			}}
		>
			<Group w={isMobile ? undefined : '100%'}>
				<Text
					miw={isMobile ? 100 : undefined}
					className={textClasses.settingsSubTitle}
					classNames={textClasses}
				>
					{title}
				</Text>
				<Popover withArrow withOverlay classNames={popoverClasses}>
					<Popover.Target>
						<ActionIcon
							className={actionIconClasses.settingsTooltip}
							classNames={actionIconClasses}
						>
							<FiHelpCircle />
						</ActionIcon>
					</Popover.Target>
					<Popover.Dropdown
						style={{
							color: 'var(--mantine-color-primary-0)',
							backgroundColor: 'var(--mantine-color-background-0)',
							width: isMobile ? '95%' : '500px',
						}}
					>
						<Stack>
							<Text className={textClasses.settingsTooltip} classNames={textClasses}>
								{tooltip.title}
							</Text>
							<Highlight
								highlight={tooltip.highlightList}
								className={textClasses.settingsTooltip}
								classNames={textClasses}
								highlightStyles={{
									backgroundImage:
										'linear-gradient(45deg, var(--mantine-color-accent-0), var(--mantine-color-primary-0))',
									fontWeight: 700,
									WebkitBackgroundClip: 'text',
									WebkitTextFillColor: 'transparent',
								}}
								style={{
									whiteSpace: 'pre-wrap',
								}}
							>
								{tooltip.description}
							</Highlight>
						</Stack>
					</Popover.Dropdown>
				</Popover>
				{openModal !== undefined && (
					<Button
						className={buttonClasses.newItemButton}
						classNames={buttonClasses}
						onClick={openModal}
					>
						<FiPlus />
					</Button>
				)}
			</Group>
			{searchValue !== undefined && (
				<DebouncedInput
					disabled={disabled}
					w={isMobile ? undefined : '35%'}
					pos={isMobile ? undefined : 'absolute'}
					className={textInputClasses.default}
					classNames={textInputClasses}
					autoFocus={!isMobile}
					placeholder={searchPlaceholder ?? 'Search...'}
					value={searchValue}
					onInput={() => setIsLoading(true)}
					onChange={(value: any) => {
						setSearchValue(value);
					}}
					style={{
						zIndex: 100,
					}}
					styles={
						theme.textShadowsEnabled
							? {
									label: { boxShadow: '2px 2px var(--mantine-color-border-0)' },
								}
							: undefined
					}
					rightSection={
						isLoading ? (
							<ActionIcon
								className={actionIconClasses.loadingSpinner}
								classNames={actionIconClasses}
							>
								<FiLoader />
							</ActionIcon>
						) : (
							searchValue && (
								<ActionIcon
									className={actionIconClasses.settingsTooltip}
									classNames={actionIconClasses}
									onClick={() => setSearchValue('')}
								>
									<FiX />
								</ActionIcon>
							)
						)
					}
				/>
			)}
			{setDragging && (
				<Switch
					className={switchClasses.default}
					classNames={switchClasses}
					label={'Reorder'}
					labelPosition='left'
					pos={'absolute'}
					right={isMobile ? '2rem' : '1rem'}
					top={isMobile ? '3.5rem' : undefined}
					onChange={(e) => {
						setDragging(e.target.checked);
						setDisabled(e.target.checked);
					}}
				/>
			)}
		</Group>
	);
}