import qs.config
import qs.custom
import qs.services
import qs.util
import QtQuick
import QtQuick.Layouts

Item {
    id: root

    anchors.fill: parent
    anchors.margins: 16
    anchors.topMargin: 6

    Component.onCompleted: Weather.reload()

    CustomText {
        id: city

        anchors.top: parent.top
        anchors.left: parent.left

        text: Weather.city
        color: Config.colors.tertiary
    }


    MaterialIcon {
        id: icon

        anchors.left: parent.left
        anchors.verticalCenter: parent.verticalCenter
        anchors.verticalCenterOffset: font.pointSize * 0.25

        animate: true
        animateProp: "opacity"
        text: Weather.icon
        color: Weather.iconColor
        font.pointSize: Config.font.size.largest * 1.8

        Behavior on color {
            SequentialAnimation {
                PauseAnimation {
                    duration: icon.animateDuration / 2
                }
                PropertyAction {}
            }
        }
    }

    Column {
        id: info

        anchors.left: icon.right
        anchors.verticalCenter: icon.verticalCenter
        anchors.verticalCenterOffset: -3
        anchors.leftMargin: 14
        spacing: 1

        opacity: Weather.available ? 1 : 0

        Behavior on opacity {
            SequentialAnimation {
                PauseAnimation {
                    duration: temp.animateDuration / 2
                }
                PropertyAction {}
            }
        }

        CustomText {
            id: temp
            animate: true
            text: Weather.temp
            color: Config.colors.primary
            font.pointSize: Config.font.size.large
            font.weight: 500

            // Reduce padding at bottom of text
            height: implicitHeight * 0.9

            CustomText {
                anchors.left: parent.right
                anchors.bottom: parent.bottom
                anchors.leftMargin: 12
                anchors.bottomMargin: 1

                animate: true
                text: Weather.feelsLike
                color: Config.colors.tertiary
                font.pointSize: Config.font.size.larger
            }
        }

        CustomText {
            animate: true
            text: Weather.description
            color: Config.colors.secondary

            elide: Text.ElideRight
            width: Math.min(implicitWidth, root.parent.width - icon.implicitWidth - info.anchors.leftMargin - 30)
        }

        Item {
            implicitWidth: childrenRect.width
            implicitHeight: childrenRect.height

            MaterialIcon {
                id: humidityIcon

                animate: true
                text: Weather.humidityIcon
                color: Config.colors.primary
                font.pointSize: Config.font.size.normal

            }

            CustomText {
                anchors.left: humidityIcon.right
                anchors.verticalCenter: humidityIcon.verticalCenter
                anchors.leftMargin: 2

                animate: true
                text: `${Math.round(Weather.humidity * 100)}% Humidity`
                color: Config.colors.primary
            }
        }
    }
}