import QtQuick 2.0
import QtQuick.Controls 2.13
import QtGraphicalEffects 1.13

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

Item {
	id: control
	property var image: ""

	width: coloredRing.width
	height: coloredRing.height

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

		Item {
			id: background
			width: baseBackground.width + option.width / 2
			height: baseBackground.height + option.height / 2

			Rectangle {
				id: baseBackground
				width: Const.macroButton + Const.microButton + 2 * Const.margin
				height: width
				radius: width / 2
				y: option.height / 2
				color: Theme.current.noneGlow
			}

			Rectangle {
				id: corner
				width: baseBackground.width / 2
				height: baseBackground.height / 2
				y: option.height / 2
				anchors.right: baseBackground.right
				color: baseBackground.color
			}

			Rectangle {
				id: option
				width: Const.microButton + 2 * Const.microLightThickness
				height: width
				radius: width / 2
				anchors.verticalCenter: corner.top
				anchors.horizontalCenter: corner.right
				color: baseBackground.color
			}
		}

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

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

			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 {
							position: 0
							color: Theme.current.none
						}

						GradientStop {
							position: 1
							color: Theme.current.noneGlow
						}
					}
				}
			}
		}
	}

	DropShadow {
		id: dropDown
		anchors.fill: coloredRing
		source: background
		horizontalOffset: 3
		verticalOffset: 3
		radius: 4
		samples: 8
		color: Theme.current.light
	}

	DropShadow {
		id: dropUp
		anchors.fill: coloredRing
		source: background
		horizontalOffset: - 3
		verticalOffset: - 3
		radius: 4
		samples: 8
		color: Theme.current.light
	}

	InnerShadow {
		id: inner
		anchors.fill: coloredRing
		source: background
		horizontalOffset: 3
		verticalOffset: 3
		radius: 3
		samples: 6
		smooth: true
		color: Theme.current.lightShadow
	}
}