import QtQuick
import qs.config

Rectangle {
    id: root

    property bool checked: false
    property bool enabled: true
    signal toggled(bool checked)

    implicitWidth: 42
    implicitHeight: 24
    radius: height / 2
    color: checked ? Theme.accent : Theme.alpha(Theme.fg, 0.13)
    opacity: enabled ? 1 : 0.45
    border.width: 1
    border.color: checked ? Theme.alpha(Theme.accentAlt, 0.55) : Theme.alpha(Theme.fg, 0.08)

    Behavior on color { ColorAnimation { duration: Theme.durFast } }

    Rectangle {
        width: 18
        height: 18
        radius: 9
        x: root.checked ? root.width - width - 3 : 3
        anchors.verticalCenter: parent.verticalCenter
        color: root.checked ? Theme.bgDark : Theme.fgDim
        border.width: 0
        Behavior on x {
            NumberAnimation { duration: Theme.durFast; easing.type: Easing.OutCubic }
        }
    }

    MouseArea {
        anchors.fill: parent
        enabled: root.enabled
        cursorShape: Qt.PointingHandCursor
        onClicked: root.toggled(!root.checked)
    }
}