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

import QtQuick 2.15
import Thermo 1.0

ThermoView {
    id: root

    Component.onCompleted: {
        GlobalState.scheduleViewLoaded = true
    }

    ListView {
        id: roomList
        anchors.top: parent.top
        anchors.bottom: parent.bottom

        width: Theme.scheduleViewListWidth
        clip: true
        model: 6

        contentY: GlobalState.itemY
        onContentYChanged: GlobalState.itemY = contentY

        // FIXME: The touch event is not propagated
        delegate: MouseArea {
            id: delegate
            width: roomList.width
            height: Theme.isBig ? 76 : 46
            required property int index
            property bool selected: index === GlobalState.listViewIndex
            onSelectedChanged: {
                if (selected) {
                    GlobalState.selectedRoom = Rooms.getByIndex(index)
                }
            }
            onClicked: {
                GlobalState.listViewIndex = index
            }

            Text {
                text: Rooms.getByIndex(parent.index).name
                anchors.fill: parent
                font.pixelSize: Theme.scheduleViewListTextSize
                anchors.leftMargin: Theme.isBig ? 30 : 16
                anchors.rightMargin: Theme.isBig ? 30 : 16
                verticalAlignment: Text.AlignVCenter
                color: !parent.selected ? ColorStyle.greyDark1 : ColorStyle.blue
            }

            Rectangle {
                anchors.left: parent.left
                anchors.right: parent.right
                anchors.leftMargin: Theme.isBig ? 24 : 0
                anchors.rightMargin: Theme.isBig ? 24 : 40
                anchors.bottom: parent.bottom
                height: 1
                color: ColorStyle.greyMedium1
            }
        }
    }

    Rectangle {
        id: separator
        width: 1
        height: roomList.height
        anchors.right: roomList.right
        anchors.rightMargin: (scrollBar.width - width) / 2
        color: "#d5dbe0"
    }
    // TODO: Implement a proper Scrollbar
    Rectangle {
        id: scrollBar
        y: - (roomList.height - scrollBar.height) * roomList.contentItem.y
            / (roomList.contentItem.height - roomList.height)
        anchors.horizontalCenter: separator.horizontalCenter
        implicitWidth: 4
        implicitHeight: 30
        color: "#90989D"
    }

    RoomSchedule {
        anchors { left: roomList.right; right: parent.right; top: parent.top; bottom: parent.bottom;
                    leftMargin: Theme.isBig ? 60 : 30; rightMargin: Theme.isBig ? 60 : 30; bottomMargin: Theme.isBig ? 15 : 5; topMargin: Theme.isBig ? 32 : 10 }
    }

}