import QtQuick 2.15
import QtQuick.Layouts 1.15
import QtQuick.Window 2.15

import StatusQ.Core 0.1
import StatusQ.Core.Theme 0.1
import StatusQ.Components 0.1

import shared.status 1.0
import utils 1.0

CalloutCard {
    id: root
    
    /// The title of the callout card
    required property string title
    required property string description
    required property string footer

    property bool highlight: false
    
    property StatusAssetSettings logoSettings: StatusAssetSettings {
        width: 28
        height: 28
        bgRadius: bgWidth / 2
    }
    
    property string bannerImageSource: ""

    signal clicked(var mouse)

    borderWidth: 1
    implicitHeight: 290
    implicitWidth: 305
    hoverEnabled: true
    dropShadow: d.highlight
    borderColor: d.highlight ? Style.current.background : Style.current.border

    Behavior on borderColor {
        ColorAnimation { duration: 200 }
    }

    contentItem: ColumnLayout {
        StatusImage {
            id: bannerImage
            Layout.fillWidth: true
            Layout.leftMargin: d.bannerImageMargins
            Layout.rightMargin: d.bannerImageMargins
            Layout.topMargin: d.bannerImageMargins
            Layout.preferredHeight: 170
            asynchronous: true
            source: root.bannerImageSource
            fillMode: Image.PreserveAspectCrop
            layer.enabled: true
            layer.effect: root.clippingEffect
        }
        ColumnLayout {
            Layout.fillWidth: true
            Layout.fillHeight: true
            Layout.margins: 12
            
            RowLayout {
                Layout.fillWidth: true
                Layout.fillHeight: true
                Layout.maximumHeight: root.description.length ? 28 : 72
                StatusSmartIdenticon {
                    Layout.alignment: Qt.AlignLeft | Qt.AlignTop
                    Layout.preferredWidth: 28
                    Layout.preferredHeight: 28
                    asset: root.logoSettings
                    name: root.logoSettings.name
                    visible: !!root.logoSettings.name.length || !!root.logoSettings.emoji.length
                }
                StatusBaseText {
                    text: root.title
                    Layout.fillWidth: true
                    Layout.fillHeight: true
                    font.pixelSize: 13
                    font.weight: Font.Medium
                    wrapMode: Text.Wrap
                    elide: Text.ElideRight
                    verticalAlignment: Text.AlignVCenter
                }
            }
            StatusBaseText {
                Layout.fillWidth: true
                Layout.fillHeight: true
                text: root.description
                font.pixelSize: 12
                wrapMode: Text.Wrap
                elide: Text.ElideRight
                color: Theme.palette.baseColor1
                visible: root.description.length
            }
            StatusBaseText {
                id: linkSite
                Layout.fillWidth: true
                text: root.footer
                font.pixelSize: 12
                lineHeight: 16
                lineHeightMode: Text.FixedHeight
                color: Theme.palette.baseColor1
                elide: Text.ElideRight
                verticalAlignment: Text.AlignBottom
                textFormat: Text.RichText
            }
        }
    }
    MouseArea {
        anchors.fill: root
        hoverEnabled: true
        cursorShape: Qt.PointingHandCursor
        acceptedButtons: Qt.LeftButton | Qt.RightButton
        onClicked: root.clicked(mouse)
    }

    QtObject {
        id: d
        property real bannerImageMargins: 1 / Screen.devicePixelRatio // image size isn't pixel perfect..
        property bool highlight: root.highlight || root.hovered
    }
}