import QtQuick 2.0
import QtQuick.Controls 2.13
import QtGraphicalEffects 1.13

import "qrc:/theme"
import "qrc:/const"

Item {
	id: button

	property var image: ""
	property var radius: Math.min(width / 2, height / 2)
	property var border: 4

	implicitWidth: Const.macroButton
	implicitHeight: Const.macroButton

	Item {
		width: parent.width
		height: parent.height

		Rectangle {
			id: background
			anchors.fill: parent
			radius: button.radius
			color: Theme.current.button
		}

		Item {
			id: coloredRing
			width: parent.width
			height: parent.height

			Rectangle {
				id: lightRing
				width: parent.width
				height: parent.height
				radius: Math.min(width / 2, height / 2)
				color: "transparent"
				border{
					color: background.color
					width: button.border
				}
			}

			Item {
				id: borderGrad
				implicitWidth: parent.width
				implicitHeight: parent.height
				anchors.fill: parent

				layer.enabled: true
				layer.effect:
					OpacityMask {
					maskSource: lightRing
				}

				Rectangle {
					width: parent.width
					height: parent.height
					color: "transparent"

					LinearGradient {
						id: linGrad
						anchors.fill: parent
						start: Qt.point(0, parent.height)
						end: Qt.point(0, 0)
						gradient: Gradient {
							GradientStop {
								id: buttonDown
								position: 0
								color: Theme.current.shadow
							}

							GradientStop {
								id: buttonUp
								position: 1
								color: Theme.current.light
							}
						}
					}
				}
			}
		}
	}

	Item {
		id: content
		anchors.fill: parent

		Item {
			property var factor: Const.imageScale

			anchors.horizontalCenter: parent.horizontalCenter
			y: (parent.height * (1-factor)) / 2
			width: parent.width * factor
			height: parent.height * factor

			Image {
				id: img
				anchors.fill: parent
				source: image
				fillMode: Image.PreserveAspectFit
			}

			ColorOverlay {
				anchors.fill: img
				source: img
				color: Theme.current.text
			}
		}
	}
}