import { Divider, Group, Modal, Stack, Text } from '@mantine/core';
import { useCommonHooks } from 'hooks';
import { modalClasses } from 'styles';

export function HelpModal({ providerModalOpened, closeProviderModal }: any) {
	const { theme, providers, setSearchValue, setProviderLabel, setProviderURL } =
		useCommonHooks();

	return (
		<Modal.Root
			size={'60%'}
			className={modalClasses.helpModal}
			classNames={modalClasses}
			opened={providerModalOpened}
			onClose={() => {
				closeProviderModal();
				setSearchValue('');
				setProviderLabel('Google Search');
				setProviderURL('https://www.google.com/search?q=');
			}}
			style={{
				'--color-text-pri': theme.primaryColor,
				'--color-text-acc': theme.accentColor,
				'--color-background': theme.backgroundColor,
				'--color-border': theme.borderColor,
				'--color-search-background': theme.searchColor,
				'--image-background': `url(${theme.backgroundImage})`,
			}}
			closeOnEscape
			closeOnClickOutside
		>
			<Modal.Overlay />
			<Modal.Content>
				<Modal.Header>
					<Modal.Title>Help info</Modal.Title>
					<Modal.CloseButton />
				</Modal.Header>
				<Modal.Body pb={'2rem'}>
					<Stack gap={0} w={'100%'} align='center'>
						<h3 style={{ padding: 0, margin: 0 }}>Search Providers</h3>
						<Divider py={8} w={'65%'} color={theme.accentColor} />
						{providers?.map((provider: any) => (
							<Group key={provider.prefix} gap={0} w={'50%'} justify='space-between'>
								<Text>{provider.prefix}</Text>
								<Text>{provider.name}</Text>
							</Group>
						))}
					</Stack>
				</Modal.Body>
			</Modal.Content>
		</Modal.Root>
	);
}