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';
import type { CurrentWeather } from 'types';

function Header({
	greet,
	date,
	current,
	setCurrent,
	weather,
	basicWeather,
	openWeatherModal,
}: {
	greet: string | undefined;
	date: string;
	current: CurrentWeather;
	setCurrent: (current: CurrentWeather) => void;
	weather: any;
	basicWeather: any;
	openWeatherModal: () => void;
}) {
	const [time, setTime] = useState(new Date());
	const { isMobile, currentUser, fixDigits, theme } = 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={{
				flexDirection: isMobile ? 'column' : 'row',
			}}
			justify='space-between'
		>
			<Stack w={'fit-content'} pos={'relative'}>
				<Text
					className={textClasses.greeting}
					classNames={textClasses}
					fz={isMobile ? 24 : undefined}
					style={{
						textShadow:
							theme.textShadowsEnabled &&
							'3px 3px 1px color-mix(in srgb, var(--mantine-color-primary-0), transparent 50%)',
					}}
				>
					{greet
						?.replace('$firstName', currentUser.firstName)
						.replace('$lastName', currentUser.lastName)
						.replace('$^firstName', currentUser.firstName.toUpperCase())
						.replace('$^lastName', currentUser.lastName.toUpperCase())}
				</Text>
			</Stack>
			<Stack
				style={{
					gap: 0,
					flexDirection: isMobile ? 'row' : 'column',
				}}
			>
				<Text
					className={textClasses.dateTime}
					classNames={textClasses}
					style={{
						width: 'max-content',
						textShadow:
							theme.textShadowsEnabled &&
							'1px 1px 1px color-mix(in srgb, var(--mantine-color-accent-0), transparent 50%)',
					}}
				>
					{date}
				</Text>
				<Group
					style={{
						position: 'relative',
						justifyContent: isMobile ? 'right' : 'space-between',
						width: '100%',
					}}
				>
					<Group
						align='end'
						style={{
							position: 'absolute',
							bottom: isMobile ? -32 : 0,
							right: 4,
							cursor: 'pointer',
							gap: 0,
						}}
						onClick={openWeatherModal}
					>
						<Text
							className={textClasses.dateTime}
							classNames={textClasses}
							mr={'.25rem'}
							style={{
								textShadow:
									theme.textShadowsEnabled &&
									'1px 1px 1px color-mix(in srgb, var(--mantine-color-accent-0), transparent 50%)',
							}}
						>
							{current.temperature}°F
						</Text>
						<Text
							className={textClasses.dateTime}
							classNames={textClasses}
							fz={'.875rem'}
							mb={'.375rem'}
							style={{
								textShadow:
									theme.textShadowsEnabled &&
									'1px 1px 1px color-mix(in srgb, var(--mantine-color-accent-0), transparent 50%)',
							}}
						>
							{current.highTemp}°F/{current.lowTemp}°F
						</Text>
					</Group>
					<Text
						className={textClasses.dateTime}
						classNames={textClasses}
						style={{
							textShadow:
								theme.textShadowsEnabled &&
								'1px 1px 1px color-mix(in srgb, var(--mantine-color-accent-0), transparent 50%)',
						}}
					>
						{`${
							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;