import QtQuick
import QtQuick.Templates as T

Rectangle {
    id: root

    required property Theme theme
    property alias text: input.text
    property alias echoMode: input.echoMode
    property alias inputMethodHints: input.inputMethodHints
    property string placeholderText: ""
    property string accessibleName: placeholderText
    property string icon: ""
    property string fontFamily: "IBM Plex Sans"
    property int fontPixelSize: 14
    property alias input: input
    readonly property bool hintVisible: hint.visible
    signal accepted
    signal cancelled
    signal edited(string text)

    implicitWidth: 220
    implicitHeight: 38
    radius: 8
    opacity: enabled ? 1 : 0.48
    color: theme.withAlpha(theme.content.backdrop, input.activeFocus ? 0.9 : 0.68)
    border.width: input.activeFocus ? 2 : 1
    border.color: input.activeFocus ? theme.content.focus : theme.withAlpha(theme.ui.minor, 0.3)

    T.TextField {
        id: input

        anchors.fill: parent
        leftPadding: root.icon.length > 0 ? 34 : 12
        rightPadding: 12
        topPadding: 0
        bottomPadding: 0
        verticalAlignment: TextInput.AlignVCenter
        color: root.theme.content.normal
        selectionColor: root.theme.ui.accent
        selectedTextColor: root.theme.content.backdrop
        font.family: root.fontFamily
        font.pixelSize: root.fontPixelSize
        activeFocusOnTab: true
        selectByMouse: true
        clip: true
        Accessible.name: root.accessibleName
        onAccepted: root.accepted()
        onTextEdited: root.edited(text)
        Keys.onPressed: event => {
            if (event.isAutoRepeat && (event.key === Qt.Key_Return || event.key === Qt.Key_Enter))
                event.accepted = true;
        }
        Keys.onEscapePressed: event => {
            event.accepted = true;
            if (!event.isAutoRepeat)
                root.cancelled();
        }
    }

    Text {
        visible: root.icon.length > 0
        anchors.left: parent.left
        anchors.leftMargin: 12
        anchors.verticalCenter: parent.verticalCenter
        color: root.theme.ui.minor
        font.family: "Symbols Nerd Font Mono"
        font.pixelSize: 13
        text: root.icon
        Accessible.ignored: true
    }

    NuguText {
        id: hint

        anchors.left: parent.left
        anchors.right: parent.right
        anchors.leftMargin: input.leftPadding
        anchors.rightMargin: input.rightPadding
        anchors.verticalCenter: parent.verticalCenter
        visible: input.text.length === 0
        theme: root.theme
        variant: "meta"
        text: root.placeholderText
        Accessible.ignored: true
    }
}