import QtQuick 2.12
import QtQuick.Controls 2.12
import QtQuick.Layouts 1.12
import QZXing 3.3
import QtGraphicalEffects 1.0

Dialog {
    id: control

    property string _shareUrl
    property string _compName

    parent: Overlay.overlay

    x: (parent.width - width) * 0.5
    y: (parent.height - height) * 0.5

    modal: true
    //% "Share these results"
    title: qsTrId("#shareResultsHeadline")

    onClosed: {
        shareComponentLoader.sourceComponent = null
    }

    contentItem: Loader {
        id: shareComponentLoader

        asynchronous: false
        sourceComponent: null
    }

    Component {
        id: shareComponent
        StackLayout {
            id: stackLayout
            currentIndex: 0

            RowLayout {
                id: menuRow
                Repeater {
                    id: buttonRepeater
                    property var buttons: [
                        //% "Link"
                        ["\uf0c1", qsTrId("#shareByLink"), serverConn.shareResultsAsUrl],
                        //% "QR-Code"
                        ["\uf029", qsTrId("#shareByQrCode"), function() {
                            stackLayout.currentIndex = 1
                        }
                        ],
                        //% "Poster"
                        ["\uf1c1", qsTrId("#shareByPoster"), serverConn.shareResultsAsPoster],
                    ]

                    model: buttons

                    delegate: Button {
                        flat: true
                        font.family: fa5solid.name
                        text: "<font size=\"+4\">" + modelData[0] + "</font><br><br>   " + modelData[1] + "   "
                        onClicked: buttonRepeater.buttons[index][2](_shareUrl, _compName)
                    }
                }
            }


            Image {
                id: qrCodeImage

                property int finalSize: app.landscape() ? app.height * 0.8 : app.width * 0.8
                property int size: stackLayout.currentIndex === 1 ? finalSize:menuRow.height

                Layout.preferredHeight: size
                Layout.preferredWidth: size

                sourceSize.width: finalSize
                sourceSize.height: finalSize

                fillMode: Image.PreserveAspectFit

                source: "image://QZXing/encode/" + _shareUrl + "?border=true&correctionLevel=H"

                RectangularGlow {
                    id: effect
                    anchors.fill: blurRockLogoBackgroundRect
                    glowRadius: 0
                    spread: 0
                    opacity: 0.8
                    color: "black"
                    cornerRadius: blurRockLogoBackgroundRect.radius
                }

                Rectangle {
                    id: blurRockLogoBackgroundRect
                    anchors.centerIn: parent
                    width: parent.width * 0.25
                    height: width
                    radius: height * 0.2
                    color: "white"
                    Image {
                        anchors.centerIn: parent
                        width: parent.width * 0.8
                        height: width
                        mipmap: true
                        source: "qrc:/icons/blueRockHold.png"
                    }
                }

                Behavior on size {
                    NumberAnimation {
                        duration: 200
                    }
                }
            }
        }
    }

    function appear(shareUrl, compName) {
        _shareUrl = shareUrl
        _compName = compName
        shareComponentLoader.sourceComponent = shareComponent
        control.open()
    }
}