drizzli/src/routes/weather/week/[location]/DailyCards.svelte

<script lang="ts">
	import { fade } from 'svelte/transition';

	import { formatZoned, getRelativeDayLabel, isSameDayInZone } from '$lib/utils/date';

	import { getTempStyle } from '../../utils/colors';
	import weatherCodes from '../../utils/weather-codes';
	import { type FetchedDaily, type WeatherUnits, getWindArrowRotation } from './types';

	interface Props {
		daily: FetchedDaily | null;
		selectedDay: Date;
		units: WeatherUnits;
		onSelectDay: (date: Date, index: number) => void;
	}

	let { daily, selectedDay, units, onSelectDay }: Props = $props();

	function getDaylightSeconds(index: number): number {
		if (!daily) return 0;
		const sunriseTs = daily.daily.sunrise[index];
		const sunsetTs = daily.daily.sunset[index];
		if (!sunriseTs || !sunsetTs) return 0;
		return Math.max(0, sunsetTs - sunriseTs);
	}

	function getSunshinePercent(sunshineSeconds: number | null, daylightSeconds: number): number {
		if (!sunshineSeconds || daylightSeconds <= 0) return 0;
		return Math.min(100, (sunshineSeconds / daylightSeconds) * 100);
	}

	function getSunshineColor(sunshineSeconds: number | null, daylightSeconds: number): string {
		if (daylightSeconds <= 0) return '#d1d5db';
		const ratio = (sunshineSeconds ?? 0) / daylightSeconds;
		if (ratio >= 0.7) return '#f59e0b';
		if (ratio >= 0.45) return '#fbbf24';
		if (ratio >= 0.2) return '#fcd34d';
		return '#d1d5db';
	}
</script>

<div in:fade out:fade class="mb-6 min-h-[260px]">
	<div class="flex gap-1 overflow-x-auto pb-1" style="scrollbar-width: thin">
		{#if daily}
			{#each daily.dailyDates as time, index (index)}
				{@const selected = isSameDayInZone(time, selectedDay, daily.timezone)}
				{@const tempMax = daily.daily.temperature_2m_max[index]}
				{@const tempMin = daily.daily.temperature_2m_min[index]}
				{@const wCode = daily.daily.weather_code[index]}
				{@const sunDuration = daily.daily.sunshine_duration[index]}
				{@const daylightSec = getDaylightSeconds(index)}
				{@const sunColor = getSunshineColor(sunDuration, daylightSec)}
				{@const sunPct = getSunshinePercent(sunDuration, daylightSec)}
				{@const precipSum = daily.daily.precipitation_sum[index]}
				{@const windMax = daily.daily.windspeed_10m_max[index]}
				{@const gustMax = daily.daily.windgusts_10m_max[index]}
				{@const windDir = daily.daily.winddirection_10m_dominant[index]}
				{@const unit = String(units.temperature_unit)}
				{@const maxStyle = getTempStyle(tempMax, unit)}
				{@const minStyle = getTempStyle(tempMin, unit)}
				{#if tempMax != null && !isNaN(tempMax)}
					<button
						class="group flex min-w-[108px] max-w-[170px] flex-1 cursor-pointer flex-col items-center gap-0.5 rounded-xl border-2 px-1.5 py-2 transition-all duration-200
							{selected
							? 'scale-[1.03] border-primary bg-accent shadow-md'
							: 'border-transparent bg-card hover:bg-accent'}"
						onclick={() => onSelectDay(time, index)}
					>
						<!-- Day label -->
						<span class="text-sm font-bold tracking-wide">
							{formatZoned(time, daily.timezone, 'EEE').toUpperCase()}
						</span>
						<span class="text-[11px] text-muted-foreground">
							{getRelativeDayLabel(time, daily.timezone)}
						</span>

						<!-- Weather icon -->
						<div
							class="my-1 flex w-full items-center justify-center rounded-lg py-1.5"
							style="background: {sunColor}22"
						>
							<svg class="fill-foreground" width="48px" height="48px">
								<use
									xlink:href="/images/weather-icons/wi-day-{weatherCodes[
										wCode as keyof typeof weatherCodes
									] ?? 'clear'}.svg#Layer_1"
								></use>
							</svg>
						</div>

						<!-- Temperature max/min -->
						<div class="flex w-full flex-col">
							<div
								class="w-full rounded-t px-1 py-0.5 text-center text-[15px] font-bold"
								style="background-color: {maxStyle.bg}; color: {maxStyle.fg}"
							>
								{tempMax.toFixed(0)}°
							</div>
							<div
								class="w-full rounded-b px-1 py-0.5 text-center text-xs font-semibold"
								style="background-color: {minStyle.bg}; color: {minStyle.fg}"
							>
								{tempMin.toFixed(0)}°
							</div>
						</div>

						<!-- Details section -->
						<div class="mt-1 flex w-full flex-col items-center gap-0.5">
							<!-- Sunshine bar -->
							<div class="flex w-full items-center gap-1 px-1">
								<svg class="shrink-0" width="14px" height="14px" style="fill: {sunColor}">
									<use xlink:href="/images/weather-icons/wi-day-sunny.svg#Layer_1"></use>
								</svg>
								<div class="h-1.5 flex-1 overflow-hidden rounded-full bg-muted">
									<div
										class="h-full rounded-full transition-all"
										style="width: {sunPct}%; background-color: {sunColor}"
									></div>
								</div>
								<span class="text-[10px] font-medium text-muted-foreground">
									{Number((sunDuration ?? 0) / 3600).toFixed(0)}h
								</span>
							</div>

							<!-- Precipitation -->
							<div class="flex items-center gap-1 text-[11px]">
								<svg class="fill-foreground shrink-0" width="14px" height="14px">
									<use xlink:href="/images/weather-icons/wi-raindrop.svg#Layer_1"></use>
								</svg>
								<span>
									{Number(precipSum ?? 0).toFixed(
										precipSum >= 10 ? 0 : 1
									)}{units.precipitation_unit === 'mm' ? ' mm' : "'"}
								</span>
							</div>

							<!-- Wind with direction -->
							<div class="flex items-center gap-1 text-[11px]">
								{#if windDir != null && !isNaN(windDir)}
									<div
										class="inline-flex shrink-0"
										style="transform: {getWindArrowRotation(windDir)}"
									>
										<svg class="fill-foreground" width="20px" height="20px">
											<use xlink:href="/images/weather-icons/wi-direction-down.svg#Layer_1"></use>
										</svg>
									</div>
								{:else}
									<svg class="fill-foreground shrink-0" width="20px" height="20px">
										<use xlink:href="/images/weather-icons/wi-strong-wind.svg#Layer_1"></use>
									</svg>
								{/if}
								<span>
									{windMax?.toFixed(0) ?? '-'}<span class="text-muted-foreground"
										>-{gustMax?.toFixed(0) ?? '-'}</span
									>
								</span>
							</div>
						</div>
					</button>
				{/if}
			{/each}
		{/if}
	</div>
</div>

<style>
	@media (max-width: 768px) {
		button {
			min-width: 92px !important;
		}

		button :global(svg[width='48px']) {
			width: 40px;
			height: 40px;
		}
	}
</style>