import { Divider, Modal, Stack } from '@mantine/core';
import { useCommonHooks } from 'hooks';
import { modalClasses } from 'styles';
import type { Application, Provider } from 'types';
import HelpSection from './HelpSection';

export function HelpModal({
	setSearchValue,
	setProviderLabel,
	setProviderURL,
	providerModalOpened,
	closeProviderModal,
	applicationData,
	providerData,
}: {
	setSearchValue: (value: string) => void;
	setProviderLabel: (label: string) => void;
	setProviderURL: (url: string) => void;
	providerModalOpened: boolean;
	closeProviderModal: () => void;
	applicationData: Application[];
	providerData: Provider[];
}) {
	const { isMobile } = useCommonHooks();
	return (
		<Modal.Root
			size={'60%'}
			className={modalClasses.helpModal}
			classNames={modalClasses}
			opened={providerModalOpened}
			fullScreen={isMobile}
			centered
			onClose={() => {
				setSearchValue('');
				setProviderLabel('Google Search');
				setProviderURL('https://www.google.com/search?q=');
				closeProviderModal();
			}}
			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'>
						<HelpSection
							name={'Search Providers'}
							items={providerData.map((provider: Provider) => {
								return {
									name: provider.name,
									command: provider.prefix,
								};
							})}
						/>
						<Divider my={'.5rem'} color={'var(--mantine-color-accent-0)'} />
						<HelpSection
							name={'Available Applications'}
							items={applicationData.map((application: Application) => {
								return {
									name: application.url,
									command: `!${application.baseUrl.substring(1).toLowerCase()}`,
								};
							})}
						/>
					</Stack>
				</Modal.Body>
			</Modal.Content>
		</Modal.Root>
	);
}