import QtQuick 2.0
import Sailfish.Silica 1.0
import "../js/tides.js" as Tides

// Calendario maree: i prossimi 30 giorni con le ore di alta e bassa marea.
Page {
    id: page

    property var port

    // abbreviazioni giorni localizzate (context unico "Tide")
    property var dayNames: [
        qsTranslate("Tide", "Sun"), qsTranslate("Tide", "Mon"),
        qsTranslate("Tide", "Tue"), qsTranslate("Tide", "Wed"),
        qsTranslate("Tide", "Thu"), qsTranslate("Tide", "Fri"),
        qsTranslate("Tide", "Sat")
    ]

    SilicaListView {
        id: list
        anchors.fill: parent
        model: ListModel { id: dayModel }

        header: PageHeader {
            title: page.port ? page.port[0] : ""
            description: qsTr("Next 30 days — high and low tides")
        }

        delegate: Item {
            width: parent.width
            height: model.isDay ? Theme.itemSizeSmall : Theme.itemSizeSmall * 0.8

            // riga del giorno
            Rectangle {
                visible: model.isDay
                anchors.fill: parent
                color: Theme.rgba(Theme.highlightBackgroundColor, 0.2)
                Label {
                    text: model.day
                    anchors.left: parent.left
                    anchors.leftMargin: Theme.horizontalPageMargin
                    anchors.verticalCenter: parent.verticalCenter
                    color: Theme.highlightColor
                    font.pixelSize: Theme.fontSizeSmall
                }
            }

            // riga evento (alta/bassa)
            Label {
                visible: !model.isDay
                text: model.kind === "high" ? "▲" : "▼"
                color: model.kind === "high" ? Theme.highlightColor : Theme.errorColor
                font.pixelSize: Theme.fontSizeSmall
                anchors.left: parent.left
                anchors.leftMargin: Theme.horizontalPageMargin
                anchors.verticalCenter: parent.verticalCenter
            }
            Label {
                visible: !model.isDay
                text: model.time
                color: Theme.primaryColor
                anchors.left: parent.left
                anchors.leftMargin: Theme.horizontalPageMargin + 36
                anchors.verticalCenter: parent.verticalCenter
            }
            Label {
                visible: !model.isDay
                text: model.height
                color: Theme.secondaryColor
                font.pixelSize: Theme.fontSizeSmall
                anchors.right: parent.right
                anchors.rightMargin: Theme.horizontalPageMargin
                anchors.verticalCenter: parent.verticalCenter
            }
        }

        VerticalScrollDecorator {}
    }

    Component.onCompleted: build()

    function build() {
        dayModel.clear()
        if (!port) {
            console.log("[tide] calendar: port undefined")
            return
        }
        console.log("[tide] calendar build:", port[0])
        var now = new Date()
        for (var g = 0; g < 30; g++) {
            var d = new Date(now.getFullYear(), now.getMonth(), now.getDate() + g)
            var ex = Tides.extrema(port, d, 1)
            dayModel.append({ isDay: true, day: Tides.fmtDate(d.getTime(), page.dayNames),
                              time: "", kind: "", height: "" })
            for (var i = 0; i < ex.length; i++) {
                dayModel.append({ isDay: false, day: "",
                                  time: Tides.fmtHM(ex[i].t),
                                  kind: ex[i].kind,
                                  height: Tides.fmtH(ex[i].h, appSettings.unit) })
            }
        }
        console.log("[tide] calendar giorni:", 30, "righe:", dayModel.count)
    }
}