// Copyright (C) 2024 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial

import QtQuick 2.15
import Watch 1.0

Item {
    enum AppId {
        Tools       = 0,
        Compass     = 1,
        SportApp    = 2,
        YourHealth  = 3,
        Settings    = 4
    }
    id: root
    property bool onScreen: false
    property bool offScreen: false
    property real selectedOp: 1.0
    property real othersOp: 0.1
    readonly property int entryHeight: 90
    readonly property int entryWidth: width

    readonly property int maxTextAlpha: 255
    readonly property int minTextAlpha: 178

    property int currentIndex: 3

    signal selected(ApplicationList.AppId app)

    function isCurrentIndex(i : int) : bool {
        return i === root.currentIndex
    }

    function swipeToIndex(index: int) {
        listView.contentY = entryHeight * index - (2 * entryHeight)
    }

    ListView {
        id: listView
        anchors.fill: parent
        clip: true

        Component.onCompleted: {
            swipeToIndex(currentIndex)
        }

        onContentYChanged: {
            var __localIndex = Math.round(Math.abs(contentY) / entryHeight)
            currentIndex = Math.min(__localIndex + 2, 6)
        }

        // Two items are placed at the beginning and at the end
        // are included so that we could we could center selected
        // item
        model: ListModel {
            ListElement { name: ""; img: "images/list/tools.png"; imgBig: "images/list/tools-big.png" }
            ListElement { name: ""; img: "images/list/tools.png"; imgBig: "images/list/tools-big.png" }
            ListElement { name: "Tools"; img: "images/list/tools.png"; imgBig: "images/list/tools-big.png" }
            ListElement { name: "Compass"; img: "images/list/compass.png"; imgBig: "images/list/compass-big.png" }
            ListElement { name: "Sport App"; img: "images/list/sport-app.png"; imgBig: "images/list/sport-app-big.png" }
            ListElement { name: "Your Health"; img: "images/list/your-health.png"; imgBig: "images/list/your-health-big.png" }
            ListElement { name: "Settings"; img: "images/list/settings.png"; imgBig: "images/list/settings-big.png" }
            ListElement { name: ""; img: "images/list/tools.png"; imgBig: "images/list/tools-big.png" }
            ListElement { name: ""; img: "images/list/tools.png"; imgBig: "images/list/tools-big.png" }
        }

        delegate: MouseArea {
            id: delegate
            width: root.entryWidth
            height: root.entryHeight

            onClicked: {
                if (model.name === "") {
                    return
                }
                if (root.currentIndex === index ) {
                    selected(index-2)
                }
                currentIndex = index
                swipeToIndex(currentIndex)
            }

            opacity: index === root.currentIndex ? selectedOp : othersOp

            Image {
                id: image
                anchors.left: parent.left
                anchors.leftMargin: margin
                anchors.verticalCenter: parent.verticalCenter
                source: isCurrentIndex(index) ? model.imgBig : model.img
                visible: model.name !== ""

                property int margin: isCurrentIndex(index) ? 8 : 18
            }

            Text {
                anchors.left: image.right
                anchors.leftMargin: 25
                anchors.verticalCenter: parent.verticalCenter
                text: model.name
                font.pixelSize: 34
                font.family: Theme.fontFamily
                color: Qt.rgba(255, 255, 255, alpha/maxTextAlpha);

                property int alpha: isCurrentIndex(-index) ? maxTextAlpha : minTextAlpha
            }
        }
    }
}