import QtQuick 2.14
import QtQuick.Controls 2.14
import QtQuick.Controls.impl 2.14
import QtQuick.Templates 2.14 as T
import QtGraphicalEffects 1.14
import QtQuick.Layouts 1.14


T.Button {
    id: control
    property int baseSize: 10

    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
                            implicitContentWidth + leftPadding + rightPadding)
    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
                             implicitContentHeight + topPadding + bottomPadding)

    padding: 0//control.baseSize * 2
    // verticalPadding: control.baseSize * 0.4
    // spacing: control.baseSize * 0.6

    icon.width: control.baseSize * 2.4
    icon.height: control.baseSize * 2.4
    icon.color: control.checked || control.highlighted ? control.palette.brightText :
                control.flat && !control.down ? (control.visualFocus ? control.palette.highlight : control.palette.windowText) : control.palette.buttonText

    property color topColor: "#242429"
    property color bottomColor: "#242429"
    property color backgroundColor: "#393841"
    property string iconSource: "./icon_placeholder.svg"
    property int notificationCount: 0
    property bool enabled: true

    /*********************************************************************
     * CONTENTS
     ********************************************************************/
    contentItem: Item {
        transform: Translate {
            x: control.down ? Math.round(1) || 1 : 0
            y: control.down ? Math.round(1) || 1 : 0
        }

        // Style around button content
        Rectangle {
            anchors.centerIn: parent
            color: "transparent"
            width: parent.width - control.baseSize * 2
            height: control.baseSize * 7
            // radius: control.baseSize

            // Contents
            RowLayout {
                anchors.left: parent.left
                anchors.top: parent.top
                anchors.margins: control.baseSize
                Item {
                    id: buttonIconInset
                    width: control.baseSize * 5
                    height: control.baseSize * 5

                    // Background behind icon
                    Rectangle {
                        width: control.baseSize * 5
                        height: control.baseSize * 5
                        anchors.margins: 1
                        // NOTE: use only solid colors for this shape.
                        //       Alpha can cause weird InnerShadow blending.
                        color: Qt.darker(control.backgroundColor) // "#232228"
                        radius: control.baseSize

                        // icon image
                        Image {
                            id: buttonIconImage
                            anchors.centerIn: parent
                            width: control.baseSize * 3
                            height: control.baseSize * 3
                            anchors.margins: control.baseSize
                            source: control.iconSource
                            fillMode: Image.PreserveAspectFit
                            // Hide colored image to prevent artifacts
                            visible: false
                        }

                        // Color icon to match theme and/or state
                        // TODO: maybe move this to a C++-based image provider
                        ColorOverlay {
                            anchors.fill: buttonIconImage
                            source: buttonIconImage
                            color: control.enabled ? "#FFFFFF" : "#767679"
                        }
                    }

                    // Apply layer effect to create inset depth
                    layer.enabled: true
                    layer.effect: InnerShadow {
                        color: Qt.hsla(0, 0, 0, 0.5)
                        samples: 32
                        radius: control.baseSize * 1
                        spread: 0.0825
                        horizontalOffset: control.baseSize * 0.2
                        verticalOffset: control.baseSize * 0.2
                    }
                }

                Text {
                    text: control.text
                    color: "white"
                    font.family: "Barlow"
                }

                // Reference: this produces the expected, lighter color
                Rectangle {
                    width: 40
                    height: 40
                    color: Qt.hsla(0, 0, 1, 0.2)
                }
            }
        }

    }

    background: Item {
        implicitWidth: control.baseSize * 9.0
        implicitHeight: control.baseSize * 9.0

        visible: !control.flat || control.down || control.checked || control.highlighted

        Rectangle {
            id: backgroundRectangle

            anchors.fill: parent

            visible: true
            radius: control.baseSize * 0.4
            border.color: control.palette.highlight
            border.width: control.visualFocus ? 2 : 0
            anchors.margins: control.baseSize
            // NOTE: use only solid colors for this shape.
            //       Alpha can cause weird InnerShadow blending.
            color: control.backgroundColor
        }

        // Apply layer effect to create depth when pressed
        layer.enabled: true
        layer.effect: InnerShadow {
            color: control.down ? Qt.hsla(0, 0, 0, 0.5) : Qt.hsla(0, 1, 1, 0.75)
            // color: control.down ? Qt.darker(control.backgroundColor) : Qt.lighter(control.backgroundColor)
            samples: 32
            radius: control.baseSize * 0.25
            spread: .0825
            horizontalOffset: control.baseSize * 0.2
            verticalOffset: control.baseSize * 0.2
        }

        DropShadow {
            id: backgroundDropShadow
            anchors.fill: backgroundRectangle
            source: backgroundRectangle

            // width: parent.width
            // height: parent.height

            visible: !control.down
            
            color: Qt.hsla(0, 0, 0, 0.5)
            radius: 4.0
            samples: 4
            // spread: 0
            horizontalOffset: 3
            verticalOffset: 3
        }

    }
}