import QtQuick

Item {
    id: root

    property alias text: input.text
    property alias placeholderText: placeholder.text
    property alias input: input

    signal accepted()

    implicitHeight: Theme.searchHeight
    implicitWidth: 200
    Accessible.role: Accessible.EditableText
    Accessible.name: placeholder.text
    Accessible.editable: true

    Rectangle {
        anchors.fill: parent
        radius: Theme.radiusMedium
        color: Theme.searchFill
        border.width: 1
        border.color: input.activeFocus ? Theme.borderStrong : Theme.border

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

    Row {
        id: row
        anchors.fill: parent
        anchors.leftMargin: 12
        anchors.rightMargin: 12
        spacing: 10

        NebulaIcon {
            id: searchIcon
            anchors.verticalCenter: parent.verticalCenter
            name: "search"
            size: 16
            color: input.activeFocus ? Theme.textPrimary : Theme.textSecondary
        }

        Item {
            width: parent.width - searchIcon.width - row.spacing
            height: parent.height

            Text {
                id: placeholder
                anchors.fill: parent
                verticalAlignment: Text.AlignVCenter
                text: qsTr("Search")
                color: Theme.textTertiary
                font.family: Theme.fontFamily
                font.pixelSize: Theme.fontSize
                visible: input.text.length === 0 && !input.preeditText
            }

            TextInput {
                id: input
                anchors.fill: parent
                verticalAlignment: Text.AlignVCenter
                color: Theme.textPrimary
                font.family: Theme.fontFamily
                font.pixelSize: Theme.fontSize
                clip: true
                selectByMouse: true
                activeFocusOnTab: true
                onAccepted: root.accepted()
            }
        }
    }

    FocusFrame {
        target: root
        active: input.activeFocus
        radius: Theme.radiusMedium
    }
}