import QtQuick
import Sloposk

// Long-press choices above a key; the one under the finger is highlighted.
Item {
    id: popup

    required property AlternatesPicker picker

    visible: picker.open
    x: picker.rect.x
    y: picker.rect.y
    width: picker.rect.width
    height: picker.rect.height

    Rectangle {
        anchors { fill: background; topMargin: 1; bottomMargin: -2 }
        radius: background.radius
        color: Theme.keyShadow
    }

    Rectangle {
        id: background
        anchors.fill: parent
        radius: Theme.keyRadius + 2
        color: Theme.characterKey
    }

    Row {
        anchors.fill: parent

        Repeater {
            model: popup.picker.choices

            delegate: Rectangle {
                required property string modelData
                required property int index
                readonly property bool selected: index === popup.picker.selected

                width: popup.width / popup.picker.choices.length
                height: popup.height
                radius: Theme.keyRadius
                color: selected ? Theme.accent : "transparent"

                Text {
                    anchors.centerIn: parent
                    text: parent.modelData
                    font.pixelSize: parent.height * 0.4
                    color: parent.selected ? Theme.accentText : Theme.text
                }
            }
        }
    }
}