import QtQuick
import qs.config

// A themed on/off switch. Reports intent through `toggled` rather than driving
// `checked` itself, so the caller can keep it bound to the real state and let
// the switch follow whatever actually happened.
Rectangle {
    id: root

    property bool checked: false
    // Shown mid-flight, while the backing state is still catching up.
    property bool busy: false

    signal toggled(bool checked)

    implicitWidth: 38
    implicitHeight: 20
    radius: height / 2
    color: root.checked ? Theme.accent : Theme.background
    border.width: Theme.borderWidth
    border.color: root.checked ? Theme.accent : Theme.border
    opacity: root.busy ? 0.6 : 1

    Behavior on color {
        ColorAnimation {
            duration: Theme.animDuration
            easing.type: Theme.animEasing
        }
    }

    Rectangle {
        id: knob

        y: (parent.height - height) / 2
        x: root.checked ? root.width - width - 3 : 3
        width: root.height - 6
        height: width
        radius: height / 2
        color: root.checked ? Theme.background : mouse.containsMouse ? Theme.text : Theme.textDim

        Behavior on x {
            NumberAnimation {
                duration: Theme.animDuration
                easing.type: Theme.animEasing
            }
        }

        Behavior on color {
            ColorAnimation {
                duration: Theme.animDuration
                easing.type: Theme.animEasing
            }
        }
    }

    MouseArea {
        id: mouse

        anchors.fill: parent
        hoverEnabled: true
        cursorShape: Qt.PointingHandCursor
        onClicked: root.toggled(!root.checked)
    }
}