import { Group, SimpleGrid, Stack, Text } from '@mantine/core';
import { useCommonHooks } from 'hooks';
import { textClasses } from 'styles';
import type { ExtendedForecast } from 'types';
import WeatherIcon from './WeatherIcon';

export default function ExtendedForecastCard({
	forecast,
}: {
	forecast: ExtendedForecast[];
}) {
	const { isMobile } = useCommonHooks();
	const day = forecast.slice(2, 14).filter((item: ExtendedForecast) => item.isDaytime);
	const night = forecast.slice(2, 14).filter((item: ExtendedForecast) => !item.isDaytime);
	return (
		<Stack
			gap={0}
			w={'100%'}
			justify='space-between'
			style={{
				backgroundColor: 'var(--mantine-color-search-0)',
				padding: '1rem',
				borderRadius: '8px',
				paddingBottom: '.5rem',
			}}
		>
			<Group
				gap={0}
				style={{ width: '100%', marginBottom: '.5rem', paddingLeft: '1rem' }}
			>
				<Text
					style={{
						fontSize: '1.375rem',
						textAlign: 'left',
					}}
				>
					Extended Forecast
				</Text>
			</Group>
			<SimpleGrid w={'100%'} cols={isMobile ? 3 : 6}>
				{day.map((item: ExtendedForecast, index: number) => {
					const short = item.shortForecast.includes('And')
						? item.shortForecast.substring(0, item.shortForecast.indexOf('And'))
						: item.shortForecast.includes('then')
							? item.shortForecast.substring(0, item.shortForecast.indexOf('then'))
							: item.shortForecast;

					return (
						<Stack
							key={item.name}
							gap={0}
							align='center'
							bg={'var(--mantine-color-background-0)'}
							style={{
								borderRadius: '8px',
							}}
						>
							<Text>{item.name}</Text>
							<WeatherIcon textDescription={short} />
							<Group
								justify={short.length > 15 ? 'flex-start' : 'center'}
								style={{
									width: '100%',
									whiteSpace: 'nowrap',
									overflow: 'hidden',
									boxSizing: 'border-box',
									position: 'relative',
								}}
							>
								<Text
									className={short.length > 15 ? textClasses.autoScrollText : undefined}
									classNames={textClasses}
								>
									{short}
								</Text>
							</Group>
							<Text>
								{item.temperature}°{item.temperatureUnit}/{night[index].temperature}°
								{item.temperatureUnit}
							</Text>
						</Stack>
					);
				})}
			</SimpleGrid>
		</Stack>
	);
}