TriggerFrontend/src/pages/homepage/components/Header/Header.tsx

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

function Header({
	greet,
	date,
	current,
	setCurrent,
	weather,
	basicWeather,
	openWeatherModal,
}: any) {
	const [time, setTime] = useState(new Date());
	const { isMobile, currentUser, fixDigits } = useCommonHooks();

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

	useEffect(() => {
		if (weather !== undefined && basicWeather !== undefined) {
			setCurrent({
				icon: weather.features[0]?.properties.icon?.replace('medium', 'large') || '',
				textDescription: weather.features[0]?.properties.textDescription,
				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:
					basicWeather.properties.heatIndex?.values[0].value === null
						? null
						: Math.round(
								(basicWeather.properties.heatIndex.values[0].value * 9) / 5 + 32,
							),
				windChill:
					basicWeather.properties.windChill?.values[0].value === null
						? null
						: Math.round(
								(basicWeather.properties.windChill.values[0].value * 9) / 5 + 32,
							),
				windSpeed: Math.round(weather.features[0]?.properties.windSpeed.value / 1.60934),
				windDirection: weather.features[0]?.properties.windDirection.value,
				pressure: Math.round(
					weather.features[0]?.properties.barometricPressure.value / 3386.38,
				),
			});
		}
	}, [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 : undefined}
				>
					{greet
						.replace('$firstName', currentUser.firstName)
						.replace('$lastName', currentUser.lastName)
						.replace('$^firstName', currentUser.firstName.toUpperCase())
						.replace('$^lastName', currentUser.lastName.toUpperCase())}
				</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,
							cursor: 'pointer',
						}}
						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>
		</Stack>
	);
}

export default Header;