import QtQuick 2.15
import "fauxcyrillic.js" as Faux


// Campo di input etichettato in stile costruttivista.
Column {

    FontLoader {
        id: themeFont
        source: "assets/fonts/RussoOne-Regular.ttf"
    }

    id: field
    property string label: ""
    property alias text: input.text
    property alias input: input
    property bool password: false
    property bool focusOnStart: false
    signal accepted()
    width: parent.width
    spacing: 4

    Text {
        text: Faux.apply(field.label)
        color: "#f0dfba"
        font.family: themeFont.name
        font.pixelSize: 12
        font.bold: true
        font.letterSpacing: 2
    }

    Rectangle {
        width: field.width
        height: 40
        color: "#cc101012"
        border.color: input.activeFocus ? "#d83a28" : "#66f0dfba"
        border.width: input.activeFocus ? 2 : 1

        Behavior on border.color { ColorAnimation { duration: 150 } }

        TextInput {
            id: input
            anchors.fill: parent
            anchors.leftMargin: 10
            anchors.rightMargin: 10
            verticalAlignment: Text.AlignVCenter
            color: "#f0dfba"
            font.family: themeFont.name
            font.pixelSize: 16
            font.bold: true
            echoMode: field.password ? TextInput.Password : TextInput.Normal
            selectByMouse: true
            focus: field.focusOnStart
            onAccepted: field.accepted()
        }
    }
}