/******************************************************************************
**
** Copyright (C) 2023 The Qt Company Ltd.
** Contact: https://www.qt.io/licensing/
**
** This file is part of the Qt Quick Ultralite module.
**
** $QT_BEGIN_LICENSE:COMM$
**
** Commercial License Usage
** Licensees holding valid commercial Qt licenses may use this file in
** accordance with the commercial license agreement provided with the
** Software or, alternatively, in accordance with the terms contained in
** a written agreement between you and The Qt Company. For licensing terms
** and conditions see http://www.qt.io/terms-conditions. For further
** information use the contact form at http://www.qt.io/contact-us.
**
** $QT_END_LICENSE$
**
******************************************************************************/

import QtQuick 2.15
import QtQuick.Templates 2.15
import QtQuickUltralite.Extras 2.0
import Thermo 1.0

Item {
    id: root

    Connections {
        target: GlobalState

        onSelectedRoomChanged: {
            tempSliderAnimations.enabled = GlobalState.scheduleViewLoaded
            timeSlider.roomSwitched()
            tempSlider.value = GlobalState.selectedRoom.temperature
        }
    }

    Column {
        id: columnItem
        anchors.fill: parent

        y: Theme.roomScheduleTopMargin

        spacing: Theme.sliderSpacing

        Column {
            anchors.horizontalCenter: parent.horizontalCenter
            width: Theme.sliderWidth
            spacing: Theme.sliderLabelSpacing
            StaticText {
                text: qsTr("Set interval time")
                anchors.left: parent.left
                anchors.right: parent.right
                color: "#3c94eb"
                font.pixelSize: Theme.sliderLabelFontSize
            }
            TimeIntervalSlider {
                id: timeSlider
                width: Theme.sliderWidth
                height: sliderContainer.height
            }
        }

        Column {
            anchors.horizontalCenter: parent.horizontalCenter
            width: Theme.sliderWidth
            spacing: Theme.sliderLabelSpacing
            StaticText {
                id: tempText
                text: qsTr("Set temperature")
                anchors.left: parent.left
                anchors.right: parent.right
                color: "#3c94eb"
                font.pixelSize: Theme.sliderLabelFontSize
            }

            Item {
                id: sliderContainer
                height: tempSlider.handle.height + tempSlider.topPadding + tempSlider.bottomPadding

                Slider {
                    id: tempSlider
                    value: GlobalState.selectedRoom.temperature
                    onMoved: GlobalState.selectedRoom.temperature = value
                    from: Units.fahrenheitToTemperatureUnit(50)
                    to: Units.fahrenheitToTemperatureUnit(90)
                    stepSize: 1

                    implicitWidth: Theme.sliderWidth
                    height: sliderContainer.height + 20 // to improve touchability

                    anchors.verticalCenter: parent.verticalCenter

                    handle: Item {
                        width: Theme.sliderHandleSize
                        height: Theme.sliderHandleSize

                        Image {
                            anchors.centerIn: parent
                            anchors.verticalCenterOffset: 6 // account for shadow
                            source: "slider-handle.png"
                        }

                        x: tempSlider.leftPadding + tempSlider.visualPosition * (tempSlider.availableWidth - width)
                        Behavior on x {
                            id: tempSliderAnimations
                            enabled: GlobalState.scheduleViewLoaded
                            NumberAnimation {
                                onRunningChanged: {
                                    if (!running) {
                                        tempSliderAnimations.enabled = false
                                    }
                                }
                            }
                        }
                        y: (tempSlider.height - height) / 2

                        Row {
                            anchors.horizontalCenter: parent.horizontalCenter
                            anchors.bottom: parent.top
                            anchors.bottomMargin: 4
                            spacing: 2

                            Text {
                                text: tempSlider.value.toString()
                                color: "#3d464d"
                                font.pixelSize: Theme.sliderHandleLabelFontSize
                            }

                            StaticText {
                                text: Units.temperatureSymbol
                                color: "#3d464d"
                                font.pixelSize: Theme.sliderHandleLabelFontSize
                            }
                        }
                    }

                    background: Image {
                        anchors.verticalCenter: parent.verticalCenter
                        source: "scrollbar-temperature-track.png"
                    }
                }
            }
        }
    }
}