import QtQuick

// A labelled on/off switch in the iOS style.
Item {
    id: row

    required property string text
    property string detail: ""
    property bool checked: false
    signal toggled(bool checked)

    implicitHeight: 52

    Column {
        anchors { left: parent.left; right: track.left; rightMargin: 12; verticalCenter: parent.verticalCenter }
        spacing: 2

        Text {
            width: parent.width
            text: row.text
            color: Theme.text
            font.pixelSize: 16
            elide: Text.ElideRight
        }
        Text {
            width: parent.width
            visible: text !== ""
            text: row.detail
            color: Theme.secondaryText
            font.pixelSize: 12
            elide: Text.ElideRight
        }
    }

    Rectangle {
        id: track
        anchors { right: parent.right; verticalCenter: parent.verticalCenter }
        width: 50
        height: 30
        radius: height / 2
        color: row.checked ? Theme.toggleOn : Theme.functionKey

        Rectangle {
            x: row.checked ? parent.width - width - 2 : 2
            anchors.verticalCenter: parent.verticalCenter
            width: parent.height - 4
            height: width
            radius: width / 2
            color: "#ffffff"
            Behavior on x { NumberAnimation { duration: 120 } }
        }
    }

    TapHandler {
        onTapped: row.toggled(!row.checked)
    }
}