import QtQuick
import QtQuick.Layouts
import QtQuick.Controls

import roulette

Item {

    StreetBetsModel {
        id: streetBetsModel
    }

    RowLayout {
        id: layout
        property int indexForDialog

        anchors {
            left: parent.left
            leftMargin: 90
            top: parent.top
            topMargin: 22
        }

        spacing: 1.8

        Repeater {
            id: repeater
            model: 12

            Item {
                height: 45
                width: 35
                property alias selected: selected

                Rectangle {
                    visible: true
                    color: tapHandler1.pressed ? "#999999" : "#EEEEEE"
                    opacity: hoverHandler.hovered ? 0.4 : 0
                    height: parent.height
                    width: parent.width

                    HoverHandler {
                        id: hoverHandler
                    }
                    TapHandler {
                        id: tapHandler1
                    }
                }

                Rectangle {
                    id: selected

                    visible: true
                    color: "transparent"
                    height: parent.height
                    width: parent.width
                    border.color: "blue"
                    border.width: 0

                    TapHandler {

                        onTapped: {
                            if (parent.border.width == 0) {
                                parent.border.width = 2
                                layout.indexForDialog = index

                                dialog.open()
                            } else {
                                parent.border.width = 0
                            }
                        }
                    }
                }
            }
        }
    }

    Dialog {
        property alias input: input

        id: dialog
        height: 35
        width: 65

        TextField {
            id: input
            focus: true

            anchors {
                fill: parent
            }

            onActiveFocusChanged: {
                selectAll()
                focus = true
            }
            onAccepted: {
                dialog.accept()
            }
        }

        onActiveFocusChanged: {
            dialog.x = 120 + repeater.itemAt(layout.indexForDialog).x
            dialog.y = 60 + repeater.itemAt(layout.indexForDialog).y
        }

        onAccepted: PlayerAreaModel.bet(PlayerAreaModel.STREET, layout.indexForDialog, input.text)
        onRejected: repeater.itemAt(layout.indexForDialog).selected.border.width = 0
    }
}