// Copyright (C) 2024 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial
import QtQuick 2.15
import QtQuickUltralite.Extras 2.0
import Thermo 1.0

Item {
    id: root

    property Room room

    signal selected

    height: Theme.cardHeight
    width: Theme.cardWidth

    Item {
        height: Theme.cardHeight
        width: Theme.cardWidth

        Image {
            source: "images/card-back-topleft.png"
        }
        Rectangle {
            color: ColorStyle.greyLight1
            height: Theme.cardCornerRadius
            width: Theme.cardWidth - 2 * Theme.cardCornerRadius
            x: Theme.cardCornerRadius
        }
        Image {
            source: "images/card-back-topright.png"
            x: Theme.cardWidth - Theme.cardCornerRadius
        }
        Rectangle {
            color: ColorStyle.greyLight1
            height: Theme.cardHeight - 2 * Theme.cardCornerRadius
            width: Theme.cardWidth
            y: Theme.cardCornerRadius
        }
        Image {
            source: "images/card-back-bottomleft.png"
            y: Theme.cardHeight - Theme.cardCornerRadius
        }
        Rectangle {
            color: ColorStyle.greyLight1
            height: Theme.cardCornerRadius
            width: Theme.cardWidth - 2 * Theme.cardCornerRadius
            x: Theme.cardCornerRadius
            y: Theme.cardHeight - Theme.cardCornerRadius
        }
        Image {
            source: "images/card-back-bottomright.png"
            x: Theme.cardWidth - Theme.cardCornerRadius
            y: Theme.cardHeight - Theme.cardCornerRadius
        }
        Row {
            id: temperatureText
            anchors.left: parent.left
            anchors.leftMargin: Theme.cardTemperatureLeftMargin
            anchors.right: parent.right
            anchors.top: parent.top
            anchors.topMargin: Theme.cardTemperatureTopMargin
            height: 48
            visible: temp.text.length !== 0
            width: temp.text.length != 0 ? 92 : 0

            Text {
                id: temp
                anchors.top: parent.top
                anchors.topMargin: -8
                color: ColorStyle.greyDark4
                font.pixelSize: 60
                height: parent.height
                text: root.room.power ? root.room.temperature : ""
                visible: text.length !== 0
            }
            Text {
                anchors.top: parent.top
                color: ColorStyle.greyDark4
                font.pixelSize: 20
                text: Units.temperatureSymbol
            }
        }
        Column {
            id: roomColumn
            anchors.left: parent.left
            anchors.leftMargin: Theme.cardRoomColumnLeftMargin
            anchors.right: parent.right
            anchors.rightMargin: Theme.cardRoomColumnRightMargin
            anchors.top: parent.top
            anchors.topMargin: Theme.cardRoomColumnTopMargin

            // The line height from Hindi font causes the floor text
            // to overflow the separator line.
            spacing: !Theme.isBig && Qt.uiLanguage === "hi_IN" ? -6 : Theme.cardRoomColumnSpacing

            Text {
                color: ColorStyle.greyDark4
                font.pixelSize: Theme.cardRoomFontSize
                text: root.room.name
                width: parent.width
            }
            Text {
                color: ColorStyle.greyDark1
                font.pixelSize: Theme.cardFloorFontSize
                text: root.room.floor
                width: parent.width
            }
        }
        Image {
            source: "separator-line.png"
            x: Theme.cardSeparatorLeftMargin
            y: Theme.cardSeparatorTopMargin
        }
        Row {
            anchors.bottom: parent.bottom
            anchors.bottomMargin: 25
            anchors.left: parent.left
            anchors.leftMargin: 22
            spacing: Theme.cardIndicatorSpacing
            visible: root.room.status != Room.Off && !root.room.auto_

            ColorizedImage {
                color: root.room.dryer ? ColorStyle.blue : ColorStyle.greyMedium3
                source: "dryer-on-small.png"
            }
            Image {
                source: root.room.smallFanImage()
            }
            ColorizedImage {
                color: root.room.eco ? ColorStyle.blue : ColorStyle.greyMedium3
                source: "eco-on-small.png"
            }
            ColorizedImage {
                color: root.room.streamer ? ColorStyle.blue : ColorStyle.greyMedium3
                source: "streamer-on-small.png"
            }
        }
        Image {
            id: autoIndicator
            anchors.bottom: parent.bottom
            anchors.bottomMargin: 25
            anchors.left: parent.left
            anchors.leftMargin: 22
            source: "auto-card.png"
            visible: root.room.status != Room.Off && root.room.auto_
        }
        Row {
            anchors.bottom: parent.bottom
            anchors.bottomMargin: 23
            anchors.right: parent.right
            anchors.rightMargin: Theme.cardStateRightMargin
            spacing: 3

            Text {
                color: ColorStyle.greyDark1
                font.pixelSize: Theme.cardStateFontSize
                text: {
                    switch (root.room.status) {
                    case Room.Heating:
                        //% "Heating"
                        return qsTrId("id-heating");
                    case Room.Cooling:
                        //% "Cooling"
                        return qsTrId("id-cooling");
                    default:
                        //% "Off"
                        return qsTrId("id-off");
                    }
                }
            }
            ColorizedImage {
                color: {
                    switch (root.room.status) {
                    case Room.Heating:
                        return ColorStyle.pinkyRed;
                    case Room.Cooling:
                        return ColorStyle.blue;
                    default:
                        return ColorStyle.greyMedium3;
                    }
                }
                source: "status-small.png"
                y: Theme.isBig ? 3 : 2
            }
        }
        MouseArea {
            id: ta
            anchors.fill: parent
            enabled: root.enabled
            z: 1

            onClicked: root.selected()
        }
    }
    PowerSwitch {
        id: enabledSwitch
        anchors.right: parent.right
        anchors.rightMargin: Theme.powerSwitchRightMargin
        checked: root.room.status !== Room.Off
        enabled: root.enabled
        y: Theme.powerSwitchTopMargin

        onCheckedChanged: {
            root.room.power = checked;
        }
        onEnabledChanged: {
            checked = (root.room.status !== Room.Off);
        }
    }
}