import { Icon } from '@iconify/react/dist/iconify.js';
import { Box, Card, Center, Group, Image, Stack, Text } from '@mantine/core';
import { useCommonHooks } from 'hooks';

export enum WindDirection {
	N = 0,
	NE = 45,
	E = 90,
	SE = 135,
	S = 180,
	SW = 225,
	W = 270,
	NW = 315,
}

export default function HourlyCard({ weather }: any) {
	const { isMobile } = useCommonHooks();
	return (
		<Stack gap={0} align='center' mx={isMobile ? '.25rem' : 0}>
			<Card
				style={{
					height: '8rem',
					width: '4rem',
					backgroundColor: 'var(--color-text-pri)',
					background: 'rgba(255, 255, 255, 0.6)',
					padding: 0,
					margin: 0,
				}}
			>
				<Stack gap={0} h={'100%'} w={'100%'} align='center'>
					<Stack gap={0} align='center'>
						<Text fz={12} style={{ zIndex: 2, color: 'black' }}>
							{new Date(weather.startTime).toLocaleTimeString('en-US', {
								hour: 'numeric',
								minute: 'numeric',
							})}
						</Text>
						<Stack gap={0} align='center'>
							<Box
								style={{
									position: 'absolute',
									width: '56px',
									height: '56px',
									backgroundColor: 'transparent',
									boxShadow:
										'inset 0px 0px 10px 3px rgba(255, 255, 255, 1), 0px 0px 10px 0px rgba(255, 255, 255, .6)',
									zIndex: 1,
									borderRadius: '100%',
									borderStyle: 'none',
									border: '0px solid',
								}}
							/>
							<Image
								src={weather.icon}
								style={{
									zIndex: 0,
									borderRadius: '100%',
									border: '0px solid',
									borderStyle: 'none',
								}}
							/>
						</Stack>
					</Stack>
					<Stack gap={0} align='center' style={{ zIndex: 1 }}>
						<Center>
							<Icon
								icon={'mdi:navigation'}
								style={{
									position: 'absolute',
									transform: `rotate(${WindDirection[weather.windDirection]}deg)`,
									color: 'black',
								}}
							/>
							<Icon
								fontSize={28}
								icon={'mdi:circle-outline'}
								style={{ color: 'black' }}
							/>
						</Center>
						<Text mt={-6} fz={12} style={{ color: 'black' }}>
							{weather.windSpeed}
						</Text>
					</Stack>
				</Stack>
			</Card>
			<Text
				mt={4}
				w={'100%'}
				fz={14}
				style={{
					textAlign: 'center',
					borderRadius: '4px',
					background: 'rgba(0, 0, 0, 0.6)',
					color: 'white',
				}}
			>
				{weather.temperature}°{weather.temperatureUnit}/{weather.relativeHumidity.value}%
			</Text>
			<Box
				mt={4}
				w={'100%'}
				fz={14}
				style={{
					textAlign: 'center',
					borderRadius: '4px',
					background: 'rgba(0, 0, 0, 0.6)',
					color: 'white',
				}}
			>
				<Group gap={0} justify='center'>
					<Icon
						icon={'mdi:drop'}
						style={{
							transform: `rotate(${WindDirection[weather.windDirection]}deg)`,
						}}
					/>
					{`${weather.probabilityOfPrecipitation.value}`}%
				</Group>
			</Box>
		</Stack>
	);
}