// A password entry with a reveal toggle.
//
// Deliberately not the clipboard popover's SearchField with different text: a
// Wi-Fi key typed into a field that echoes it is readable by anyone behind you,
// and a search glyph in front of a password prompt is simply wrong. Masked by
// default, revealable while held, because the reason people want to see it is
// to check a character they just typed.

import QtQuick
import qs.config

Rectangle {
    id: root

    property alias text: input.text
    property string placeholder: "Password"
    property bool revealed: false

    signal accepted

    implicitHeight: 32
    radius: Theme.pillRadius
    color: Theme.alpha(Theme.fg, 0.07)
    // Not left at 0 so the focus ring has something to animate. See the note in
    // modules/clipboard/SearchField.qml.
    border.width: 1
    border.color: input.activeFocus ? Theme.alpha(Theme.accent, 0.55) : "transparent"

    Behavior on border.color {
        ColorAnimation { duration: Theme.durFast }
    }

    function grab(): void {
        input.forceActiveFocus();
    }

    function clear(): void {
        input.text = "";
        root.revealed = false;
    }

    TextInput {
        id: input

        anchors.left: parent.left
        anchors.leftMargin: 13
        anchors.right: revealButton.left
        anchors.rightMargin: 8
        anchors.verticalCenter: parent.verticalCenter

        color: Theme.fg
        selectionColor: Theme.alpha(Theme.accent, 0.5)
        selectedTextColor: Theme.fg
        font.family: Theme.fontFamily
        font.pixelSize: Theme.fontSize
        echoMode: root.revealed ? TextInput.Normal : TextInput.Password
        passwordCharacter: "•"
        clip: true

        onAccepted: root.accepted()

        Text {
            anchors.fill: parent
            verticalAlignment: Text.AlignVCenter
            visible: input.text === ""
            text: root.placeholder
            color: Theme.fgMuted
            font.family: Theme.fontFamily
            font.pixelSize: Theme.fontSize
            elide: Text.ElideRight
        }
    }

    Rectangle {
        id: revealButton

        anchors.right: parent.right
        anchors.rightMargin: 5
        anchors.verticalCenter: parent.verticalCenter
        width: 26
        height: 24
        radius: 7
        color: revealHover.hovered ? Theme.alpha(Theme.fg, 0.12) : "transparent"
        border.width: 0
        visible: input.text !== ""

        Text {
            anchors.centerIn: parent
            // Nerd Font eye / eye-slash. fontMono is used for icon glyphs only.
            text: root.revealed ? "\u{F070}" : "\u{F06E}"
            font.family: Theme.fontMono
            font.pixelSize: 12
            color: root.revealed ? Theme.accent : Theme.fgMuted
        }

        HoverHandler {
            id: revealHover
            cursorShape: Qt.PointingHandCursor
        }

        TapHandler {
            onTapped: root.revealed = !root.revealed
        }
    }
}