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

CustomRect {
	id: root

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

	RowLayout {
		id: header

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

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

		CustomText {
			id: title

			font.pointSize: Appearance.font.size.medium
			text: qsTr("Hourly forecast")
		}
	}

	VerticalFadeListView {
		id: layout

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

		delegate: ColumnLayout {
			id: hour

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

			spacing: Appearance.spacing.extraSmall

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

				Behavior on color {
					CAnim {
					}
				}

				CustomText {
					id: temp

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

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

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

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