import QtQuick
import QtQuick.Layouts
import M3Shapes
import ZShell
import qs.Components
import qs.Helpers
import ZShell.Config
import qs.Services

CustomRect {
	id: root

	color: Colors.layer(Colors.palette.m3surfaceContainerHigh, 2)
	implicitHeight: header.anchors.margins + header.implicitHeight + Tokens.spacing.small + layout.implicitHeight + layout.anchors.bottomMargin
	radius: Tokens.rounding.small

	RowLayout {
		id: header

		anchors.left: parent.left
		anchors.margins: Tokens.padding.largeIncreased
		anchors.top: parent.top
		spacing: Tokens.spacing.small

		MaterialIcon {
			Layout.topMargin: Math.round(fontInfo.pointSize * 0.12)
			font.pointSize: Tokens.font.size.normal
			text: "schedule"
		}

		CustomText {
			id: title

			font.pointSize: Tokens.font.size.normal
			text: qsTr("Hourly forecast")
		}
	}

	VerticalFadeListView {
		id: layout

		anchors.bottom: parent.bottom
		anchors.bottomMargin: Tokens.padding.largeIncreased
		anchors.left: parent.left
		anchors.margins: Tokens.padding.large
		anchors.right: parent.right
		implicitHeight: contentItem.childrenRect.height
		model: Weather.hourlyForecast
		orientation: VerticalFadeListView.Horizontal
		spacing: Tokens.spacing.medium

		delegate: ColumnLayout {
			id: hour

			readonly property var cond: modelData
			required property int index
			required property var modelData

			spacing: Tokens.spacing.extraSmall

			MaterialShape {
				Layout.alignment: Qt.AlignHCenter
				color: Qt.alpha(Colors.palette.m3primary, hour.index === 0 ? 1 : 0)
				implicitSize: temp.implicitHeight + Tokens.padding.small * 2
				shape: MaterialShape.Cookie4Sided

				Behavior on color {
					CAnim {
					}
				}

				CustomText {
					id: temp

					anchors.centerIn: parent
					color: hour.index === 0 ? Colors.palette.m3onPrimary : Colors.palette.m3onSurface
					font.pointSize: Tokens.font.size.normal
					text: Weather.formatTemp(hour.cond.tempC).slice(0, -1) // Remove C/F
				}
			}

			MaterialIcon {
				Layout.alignment: Qt.AlignHCenter
				color: Colors.palette.m3secondary
				font.pointSize: Tokens.font.size.extraLarge
				text: hour.cond.icon
			}

			CustomText {
				Layout.alignment: Qt.AlignHCenter
				color: Colors.palette.m3primary
				text: hour.cond.precipChance + "%"
			}

			CustomText {
				Layout.alignment: Qt.AlignHCenter
				Layout.topMargin: Tokens.spacing.extraSmall
				color: Colors.palette.m3onSurfaceVariant
				font.pointSize: Tokens.font.size.small
				text: hour.index === 0 ? qsTr("Now") : Qt.formatDateTime(new Date(hour.cond.timestamp.replace("T", " ")), Config.services.useTwelveHourClock ? "ha" : "hh:00")
			}
		}
	}
}