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

RowLayout {
	id: root

	spacing: Tokens.spacing.largeIncreased

	readonly property list<var> forecastToday: Weather.hourlyForecast.slice(0, 25)

	property var now: new Date()
	property bool useTwelveHourClock: Config.services.useTwelveHourClock
	property bool curveSmoothing: true
	property real smoothing: 2
	property real markerGap: Math.min(Math.max(Tokens.spacing.medium / 2, 0), 6)

	readonly property real markerX: {
		const d = root.now;
		return d.getHours() + d.getMinutes() / 60;
	}

	function formatHour(h) {
		if (root.useTwelveHourClock) {
			const hr = h % 12 === 0 ? 12 : h % 12;
			return hr + (h < 12 ? " AM" : " PM");
		}
		return h;
	}

	Timer {
		interval: 60000
		repeat: true
		running: true

		onTriggered: root.now = new Date()
	}

	ColumnLayout {
		Layout.fillWidth: true
		Layout.preferredWidth: root.width / 2

		RowLayout {
			Layout.fillWidth: true

			MaterialIcon {
				text: "device_thermostat"
				font.pointSize: Tokens.font.size.large
				color: Colors.palette.m3secondary
			}

			CustomText {
				text: qsTr("Temperature")
			}
		}

		Item {
			id: temperature

			implicitHeight: 150
			Layout.fillWidth: true

			LineGraph {
				id: tempGraph

				anchors.fill: parent
				values: root.forecastToday.map(e => e.tempC)
				verticalLineStep: 3
				xSteps: 24
				horizontalLineStep: 10
				minHorizontalLines: 4
				yPaddingTop: horizontalLineStep
				yPaddingBottom: horizontalLineStep
				xLabel: i => root.formatHour(i)
				yLabel: v => Math.round(v) + "°"

				markerX: root.markerX
				smoothing: root.smoothing
				curveSmoothing: root.curveSmoothing
				markerGap: root.markerGap

				lineColor: Colors.palette.m3secondary
				gridColor: Colors.palette.m3onSurface
				markerColor: Colors.palette.m3secondary
				labelColor: Colors.palette.m3onSurfaceVariant
			}
		}
	}

	ColumnLayout {
		Layout.fillWidth: true
		Layout.preferredWidth: root.width / 2

		RowLayout {
			Layout.fillWidth: true

			MaterialIcon {
				text: "water_drop"
				font.pointSize: Tokens.font.size.large
				color: Colors.palette.m3tertiary
			}

			CustomText {
				text: qsTr("Chance of precipitation")
			}
		}

		Item {
			id: precipitation

			Layout.fillWidth: true
			implicitHeight: 150

			LineGraph {
				id: graph

				anchors.fill: parent

				values: root.forecastToday.map(e => e?.precipChance ?? null)
				xSteps: 24
				yMin: 0
				yMax: 100
				yPaddingTop: 20
				verticalLineStep: 3
				lastXLine: false
				horizontalLineStep: 20
				xLabel: i => root.formatHour(i)
				yLabel: v => v + "%"

				markerX: root.markerX
				smoothing: root.smoothing
				curveSmoothing: root.curveSmoothing
				markerGap: root.markerGap

				lineColor: Colors.palette.m3tertiary
				gridColor: Colors.palette.m3onSurface
				markerColor: Colors.palette.m3tertiary
				labelColor: Colors.palette.m3onSurfaceVariant
			}
		}
	}
}