import QtQuick 2.0
import QtQuick.Controls 2.13

TextField {
    id: customTextField

    property bool isEmpty: text == ""
    property string title: "Camera Name"

    width: 250
    height: 56

    text: ""
    font.pixelSize: 14
    horizontalAlignment: Text.AlignLeft
    verticalAlignment: Text.AlignTop
    topPadding: 25

    Text {
        id: titleText
        font.pixelSize: parent.isEmpty ? 14 : 12
        y: parent.isEmpty ? 25 : 10
        x: 10
        text: parent.title
        color: parent.isEmpty ? "gray" : "red"

        Behavior on y {
            NumberAnimation {
                duration: Theme.easingDuration
                easing.type: Easing.InOutQuad
            }
        }

        Behavior on font.pixelSize {
            NumberAnimation {
                duration: Theme.easingDuration
                easing.type: Easing.InOutQuad
            }
        }
    }

    background: Rectangle {
        radius: 5
        implicitWidth: parent.width
        implicitHeight: parent.height
        color: parent.focus ? Theme.tertiary : Theme.secondary

        Rectangle {
            id: cornerFiller
            width: parent.width
            height: parent.radius
            anchors.bottom: parent.bottom
            color: parent.color
        }

        Rectangle {
            id: focusSign
            width: parent.width
            height: 2
            anchors.bottom: parent.bottom
            color: Theme.primary
            visible: customTextField.focus
        }
    }
}