import { Group, Stack, Text } from '@mantine/core';
import { WeatherModal } from 'components';
import { useEffect, useState } from 'react';
import { textClasses } from 'styles';

function Header({
	greet,
	date,
	isMobile,
	current,
	setCurrent,
	weather,
	basicWeather,
	outlook,
	hourly,
	weatherModalOpened,
	closeWeatherModal,
	openWeatherModal,
	setValue,
	setProviderLabel,
	setProviderURL,
}: any) {
	const [time, setTime] = useState(new Date());
	function fixDigits(k: any) {
		if (k < 10) {
			return `0${k}`;
		}
		return k;
	}

	useEffect(() => {
		setInterval(() => {
			const nwDate = new Date();
			setTime(nwDate);
		}, 1000);
	}, []);

	useEffect(() => {
		if (weather && basicWeather) {
			setCurrent({
				icon: weather.features[0].properties.icon?.replace('medium', 'large') || '',
				temperature: Math.round(
					(weather.features[0].properties.temperature.value * 9) / 5 + 32,
				),
				highTemp: Math.round(
					(basicWeather.properties.maxTemperature.values[0].value * 9) / 5 + 32,
				),
				lowTemp: Math.round(
					(basicWeather.properties.minTemperature.values[0].value * 9) / 5 + 32,
				),
				precipitation:
					weather.features[0].properties.precipitationLastHour.value || 'N/A',
				humidity: Math.round(weather.features[0].properties.relativeHumidity.value),
				heatIndex: Math.round(
					(weather.features[0].properties.heatIndex.value * 9) / 5 + 32,
				),
				windSpeed: Math.round(weather.features[0].properties.windSpeed.value / 1.60934),
				windDirection: weather.features[0].properties.windDirection.value,
			});
		}
	}, [weather, basicWeather]);

	return (
		<Stack
			style={{
				borderBottom: '0px solid',
				zIndex: '1',
				clear: 'both',
				display: 'flex',
				flexDirection: isMobile ? 'column' : 'row',
				gap: 0,
			}}
		>
			<Stack
				style={{
					display: 'grid',
					width: '100%',
				}}
			>
				<Text
					className={textClasses.greeting}
					classNames={textClasses}
					fz={isMobile && 24}
				>
					{greet}
				</Text>
			</Stack>
			<Stack
				style={{
					display: 'flex',
					float: 'right',
					justifyContent: 'right',
					width: 'auto',
					gap: 0,
					flexDirection: isMobile ? 'row' : 'column',
				}}
			>
				<Text
					className={textClasses.dateTime}
					classNames={textClasses}
					style={{ width: 'max-content' }}
				>
					{date}
				</Text>
				<Group
					style={{
						position: 'relative',
						justifyContent: isMobile ? 'right' : 'space-between',
						width: '100%',
						gap: 0,
					}}
				>
					<Group
						gap={0}
						align='end'
						style={{
							display: 'flex',
							position: 'absolute',
							bottom: isMobile ? -32 : 0,
							right: 16,
						}}
						onClick={openWeatherModal}
					>
						<Text
							component='h2'
							mr={4}
							className={textClasses.dateTime}
							classNames={textClasses}
						>
							{current.temperature}°F
						</Text>
						<Text
							mb={6}
							className={textClasses.dateTime}
							classNames={textClasses}
							fz={14}
						>
							{current.highTemp}°F/{current.lowTemp}°F
						</Text>
					</Group>
					<Text component='h2' className={textClasses.dateTime} classNames={textClasses}>
						{`${
							time.getHours() === 0
								? 12
								: time.getHours() > 12
									? time.getHours() - 12
									: time.getHours()
						}:${fixDigits(time.getMinutes())} ${time.getHours() >= 12 ? 'PM' : 'AM'}`}
					</Text>
				</Group>
			</Stack>
			<WeatherModal
				current={current}
				outlook={outlook}
				hourly={hourly}
				closeWeatherModal={closeWeatherModal}
				weatherModalOpened={weatherModalOpened}
				setValue={setValue}
				setProviderLabel={setProviderLabel}
				setProviderURL={setProviderURL}
				isMobile={isMobile}
			/>
		</Stack>
	);
}

export default Header;