import { Stack, TextInput } from '@mantine/core';
import { useDisclosure } from '@mantine/hooks';
import { HelpModal, WeatherModal } from 'components';
import { useCommonHooks } from 'hooks';
import { textInputClasses } from 'styles';

export default function Search({
	current,
	outlook,
	weatherModalOpened,
	closeWeatherModal,
	openWeatherModal,
}: any) {
	const {
		providerLabel,
		setProviderLabel,
		providerURL,
		setProviderURL,
		searchValue,
		setSearchValue,
		providers,
	} = useCommonHooks();

	const [providerModalOpened, { open: openProviderModal, close: closeProviderModal }] =
		useDisclosure(false);

	const handleKeyPress = (item: any) => {
		let option = '';
		let subtext = '';
		const urlPattern = new RegExp(
			'^(https?:\\/\\/)?' + // protocol
				'((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|' + // domain name
				'((\\d{1,3}\\.){3}\\d{1,3}))' + // OR ip (v4) address
				'(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*' + // port and path
				'(\\?[;&a-z\\d%_.~+=-]*)?' + // query string
				'(\\#[-a-z\\d_]*)?$',
			'i',
		); // fragment locator
		if (item.target.value.startsWith('/')) {
			option =
				item.target.value.substr(1, item.target.value.indexOf(' ') - 1) ||
				item.target.value.substr(1);
			subtext = item.target.value.substr(2 + option.length);
		} else if (item.target.value.startsWith('!')) {
			if (item.target.value.startsWith('!w')) {
				subtext = item.target.value.substr(2);
			}
		} else {
			subtext = item.target.value;
		}
		if (item.key === 'Enter') {
			if (providerLabel === 'Show help') {
				openProviderModal();
			} else if (item.target.value.startsWith('/')) {
				open(`${providerURL}${subtext}`, '_self');
			} else if (providerLabel === 'Show weather') {
				openWeatherModal();
			} else if (urlPattern.test(item.target.value)) {
				if (/^(https?:\/\/).*/i.test(item.target.value))
					window.location = item.target.value;
				else open(`https://${item.target.value}`, '_self');
			} else {
				open(`${providerURL}${subtext}`, '_self');
			}
		}
	};

	return (
		<Stack
			style={{
				height: '100px',
				backgroundColor: 'transparent',
				textAlign: 'center',
				position: 'relative',
				padding: '.3em',
				display: 'inline-block',
				gap: 0,
			}}
		>
			<TextInput
				autoFocus
				className={textInputClasses.search}
				classNames={textInputClasses}
				spellCheck='true'
				leftSection={providerLabel}
				value={searchValue}
				data-active={searchValue !== ''}
				onChange={(item: any) => {
					setSearchValue(item.currentTarget.value);
					if (
						item.target.value === '/?' ||
						item.target.value === '!help' ||
						item.target.value === '!h'
					) {
						setProviderLabel('Show help');
					} else if (item.target.value.startsWith('/')) {
						const provider = providers?.find(
							(p: any) => p.prefix === item.target.value.split(' ')[0],
						);
						setProviderLabel(provider?.name || 'Invalid Search');
						setProviderURL(provider?.url);
					} else if (item.target.value.startsWith('!')) {
						if (item.target.value === '!w' || item.target.value === '!weather') {
							setProviderLabel('Show weather');
						}
					} else {
						setProviderLabel('Google Search');
						setProviderURL('https://www.google.com/search?q=');
					}
				}}
				onKeyUp={(item: any) => {
					if (providerLabel !== 'Invalid Search') {
						handleKeyPress(item);
					}
				}}
			/>
			<HelpModal
				providerModalOpened={providerModalOpened}
				closeProviderModal={closeProviderModal}
			/>
			<WeatherModal
				current={current}
				outlook={outlook}
				closeWeatherModal={closeWeatherModal}
				weatherModalOpened={weatherModalOpened}
			/>
		</Stack>
	);
}