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

function SettingsHeader({
	setDragging,
	openModal,
	title,
	tooltip,
	searchValue,
	setSearchValue,
	searchPlaceholder,
}: any) {
	const { isMobile, theme, modalStyle } = useCommonHooks();
	return (
		<Group
			py={'1.5rem'}
			pl={'1rem'}
			h={'min-content'}
			w={'100%'}
			align='center'
			mt={0}
			justify='center'
			pos={'absolute'}
			style={{ backdropFilter: 'blur(10px) brightness(.75)', zIndex: 199 }}
		>
			<Group w={isMobile ? undefined : '100%'}>
				<Text
					miw={isMobile ? 100 : undefined}
					className={textClasses.settingsSubTitle}
					classNames={textClasses}
				>
					{title}
				</Text>
				<Popover
					withArrow
					withOverlay
					withinPortal={true}
					styles={{
						dropdown: modalStyle,
					}}
					classNames={popoverClasses}
				>
					<Popover.Target>
						<ActionIcon
							className={actionIconClasses.settingsTooltip}
							classNames={actionIconClasses}
						>
							<FiHelpCircle />
						</ActionIcon>
					</Popover.Target>
					<Popover.Dropdown
						style={{
							color: theme.primaryColor,
							backgroundColor: theme.backgroundColor,
							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, ${theme.accentColor}, ${theme.primaryColor})`,
									fontWeight: 700,
									WebkitBackgroundClip: 'text',
									WebkitTextFillColor: 'transparent',
								}}
							>
								{tooltip.description}
							</Highlight>
						</Stack>
					</Popover.Dropdown>
				</Popover>
				{searchValue !== undefined && (
					<Button
						className={buttonClasses.tableButton}
						classNames={buttonClasses}
						onClick={openModal}
					>
						<FiPlus />
					</Button>
				)}
			</Group>
			{searchValue !== undefined && (
				<TextInput
					w={isMobile ? undefined : '35%'}
					pos={isMobile ? undefined : 'absolute'}
					className={textInputClasses.settingsItem}
					classNames={textInputClasses}
					autoFocus={!isMobile}
					placeholder={searchPlaceholder || 'Search...'}
					value={searchValue}
					onInput={(event: any) => {
						setSearchValue(event.target.value);
					}}
					style={{
						zIndex: 100,
					}}
				/>
			)}
			{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);
					}}
				/>
			)}
		</Group>
	);
}

export default SettingsHeader;