TriggerFrontend/src/components/WeatherModal/CurrentWeather.tsx

import { Grid, Group, Stack, Text, ThemeIcon } from '@mantine/core';
import { useCommonHooks } from 'hooks';
import { useSunStateAPI } from 'hooks/useAPI';
import { useEffect, useState } from 'react';
import { FaLongArrowAltDown, FaLongArrowAltUp, FaWind } from 'react-icons/fa';
import { WiBarometer, WiHumidity, WiSunrise, WiSunset } from 'react-icons/wi';
import WeatherIcon from './WeatherIcon';

export default function CurrentWeather({ current }: any) {
	const { currentLocation, isMobile } = useCommonHooks();
	const { data: sunStateData } = useSunStateAPI({
		lat: currentLocation.lat,
		lon: currentLocation.lon,
	});

	const [sunStates, setSunStates] = useState<any>([]);

	useEffect(() => {
		if (sunStateData) {
			setSunStates(
				sunStateData.results.map((item: any) => {
					return {
						date: item.date,
						sunrise: item.sunrise,
						sunset: item.sunset,
					};
				}),
			);
		}
	}, [sunStateData]);

	return (
		<>
			{current ? (
				<Stack
					gap={0}
					w={'100%'}
					justify='space-between'
					style={{
						backgroundColor: 'var(--color-search-background)',
						padding: '1rem',
						borderRadius: '8px',
						paddingBottom: '.5rem',
					}}
					c={'var(--color-text-pri)'}
				>
					<Group gap={0} px={16} w={'100%'} justify='space-between'>
						<Text
							c={'var(--color-text-pri)'}
							style={{
								fontSize: '1.375rem',
								textAlign: 'right',
							}}
						>
							Current Weather
						</Text>
					</Group>
					<Group gap={8} w={'100%'} justify='space-between'>
						<Stack gap={0} w={isMobile ? '40%' : '45%'}>
							<Group gap={0} justify='flex-end'>
								<WeatherIcon
									textDescription={`${
										current.textDescription.includes('and')
											? current.textDescription.substring(
													0,
													current.textDescription.indexOf('and'),
												)
											: current.textDescription.includes('then')
												? current.textDescription.substring(
														0,
														current.textDescription.indexOf('then'),
													)
												: current.textDescription
									}`}
								/>
								<Text fz={isMobile ? '5rem' : '7rem'} fw={200}>
									{current.temperature}°<sup style={{ fontSize: '3rem' }}>F</sup>
								</Text>
							</Group>
							<Text
								c={'var(--color-text-pri)'}
								style={{
									fontSize: '1.375rem',
									textAlign: 'right',
									marginTop: -32,
									marginLeft: 16,
								}}
							>
								{current.textDescription}
							</Text>
						</Stack>
						<Stack gap={4} w={isMobile ? '50%' : '45%'}>
							<Text>
								Feels like {current.heatIndex ?? current.windChill ?? current.temperature}
								°<sup>F</sup>
							</Text>
							<Grid align='center'>
								<Grid.Col span={1}>
									<ThemeIcon
										h={'auto'}
										w={'auto'}
										variant='subtle'
										c={'var(--color-text-pri)'}
									>
										<FaLongArrowAltUp size={32} />
									</ThemeIcon>
								</Grid.Col>
								<Grid.Col
									span={3}
									style={{
										marginInlineStart: isMobile ? '1rem' : undefined,
									}}
								>
									<Text>
										{current.highTemp}°<sup>F</sup>
									</Text>
								</Grid.Col>
								<Grid.Col span={1}>
									<ThemeIcon
										h={'auto'}
										w={'auto'}
										variant='subtle'
										c={'var(--color-text-pri)'}
									>
										<FaLongArrowAltDown size={32} />
									</ThemeIcon>
								</Grid.Col>
								<Grid.Col
									span={1}
									style={{
										marginInlineStart: isMobile ? '1rem' : undefined,
									}}
								>
									<Text>
										{current.lowTemp}°<sup>F</sup>
									</Text>
								</Grid.Col>
							</Grid>
							<Grid align='center'>
								<Grid.Col span={1}>
									<ThemeIcon
										h={'auto'}
										w={'auto'}
										variant='subtle'
										c={'var(--color-text-pri)'}
									>
										<WiSunrise size={32} />
									</ThemeIcon>
								</Grid.Col>
								<Grid.Col
									span={3}
									style={{
										marginInlineStart: isMobile ? '1rem' : undefined,
									}}
								>
									<Text>{sunStates[0]?.sunrise}</Text>
								</Grid.Col>
								<Grid.Col span={1}>
									<ThemeIcon
										h={'auto'}
										w={'auto'}
										variant='subtle'
										c={'var(--color-text-pri)'}
									>
										<WiSunset size={32} />
									</ThemeIcon>
								</Grid.Col>
								<Grid.Col
									span={3}
									style={{
										marginInlineStart: isMobile ? '1rem' : undefined,
									}}
								>
									<Text>{sunStates[0]?.sunset}</Text>
								</Grid.Col>
							</Grid>
							<Grid align='center'>
								<Grid.Col span={1}>
									<ThemeIcon
										h={'auto'}
										w={'auto'}
										variant='subtle'
										c={'var(--color-text-pri)'}
									>
										<WiHumidity size={32} />
									</ThemeIcon>
								</Grid.Col>
								<Grid.Col
									span={isMobile ? 4 : 3}
									style={{
										marginInlineStart: isMobile ? '1rem' : undefined,
									}}
								>
									<Text>Humidity</Text>
								</Grid.Col>
								<Grid.Col
									span={2}
									style={{
										marginInlineStart: isMobile ? '1rem' : undefined,
									}}
								>
									<Text>{current.humidity}%</Text>
								</Grid.Col>
							</Grid>
							<Grid align='center'>
								<Grid.Col span={1}>
									<ThemeIcon
										h={'auto'}
										w={'auto'}
										variant='subtle'
										c={'var(--color-text-pri)'}
									>
										<FaWind size={32} />
									</ThemeIcon>
								</Grid.Col>
								<Grid.Col
									span={3}
									style={{
										marginInlineStart: isMobile ? '1rem' : undefined,
									}}
								>
									<Text>Wind</Text>
								</Grid.Col>
								<Grid.Col
									span={isMobile ? 4 : 3}
									style={{
										marginInlineStart: isMobile ? '1rem' : undefined,
									}}
								>
									<Text>{current.windSpeed}mph</Text>
								</Grid.Col>
							</Grid>
							<Grid align='center'>
								<Grid.Col span={1}>
									<ThemeIcon
										h={'auto'}
										w={'auto'}
										variant='subtle'
										c={'var(--color-text-pri)'}
									>
										<WiBarometer size={32} />
									</ThemeIcon>
								</Grid.Col>
								<Grid.Col
									span={3}
									style={{
										marginInlineStart: isMobile ? '1rem' : undefined,
									}}
								>
									<Text>Pressure</Text>
								</Grid.Col>
								<Grid.Col
									span={isMobile ? 4 : 3}
									style={{
										marginInlineStart: isMobile ? '1rem' : undefined,
									}}
								>
									<Text>{current.pressure} in</Text>
								</Grid.Col>
							</Grid>
						</Stack>
					</Group>
				</Stack>
			) : (
				<></>
			)}
		</>
	);
}