// SPDX-FileCopyrightText: 2021 Nheko Contributors
// SPDX-FileCopyrightText: 2022 Nheko Contributors
// SPDX-License-Identifier: GPL-3.0-or-later
import QtQuick 2.12
import QtQuick.Controls 2.12
import QtQuick.Layouts 1.12
import im.nheko

ColumnLayout {
    id: c

    property color backgroundColor: timelineRoot.palette.base
    property alias color: labelC.color
    property alias echoMode: input.echoMode
    property alias font: input.font
    property alias label: labelC.text
    property alias placeholderText: input.placeholderText
    property alias selectByMouse: input.selectByMouse
    property alias text: input.text
    property alias textPadding: input.padding

    signal accepted
    signal editingFinished
    signal textEdited

    function clear() {
        input.clear();
    }
    function forceActiveFocus() {
        input.forceActiveFocus();
    }

    ToolTip.delay: Nheko.tooltipDelay
    ToolTip.visible: hover.hovered
    spacing: 0

    onTextChanged: timer.restart()

    Timer {
        id: timer
        interval: 350

        onTriggered: editingFinished()
    }
    Item {
        Layout.bottomMargin: Nheko.paddingSmall
        Layout.fillWidth: true
        Layout.margins: input.padding
        Layout.preferredHeight: labelC.contentHeight
        visible: labelC.text
        z: 1

        Label {
            id: labelC
            color: timelineRoot.palette.text
            enabled: false
            font.letterSpacing: input.font.pixelSize * 0.02
            font.pixelSize: input.font.pixelSize
            font.weight: Font.DemiBold
            palette: timelineRoot.palette
            state: labelC.text && (input.activeFocus == true || input.text) ? "focused" : ""
            width: parent.width
            y: contentHeight + input.padding + Nheko.paddingSmall

            states: State {
                name: "focused"

                PropertyChanges {
                    target: labelC
                    y: 0
                }
                PropertyChanges {
                    opacity: 1
                    target: input
                }
            }
            transitions: Transition {
                from: ""
                reversible: true
                to: "focused"

                NumberAnimation {
                    alwaysRunToEnd: true
                    duration: 210
                    easing.type: Easing.InCubic
                    properties: "y"
                    target: labelC
                }
                NumberAnimation {
                    alwaysRunToEnd: true
                    duration: 210
                    easing.type: Easing.InCubic
                    properties: "opacity"
                    target: input
                }
            }
        }
    }
    TextField {
        id: input
        Layout.fillWidth: true
        color: labelC.color
        focus: true
        opacity: labelC.text ? 0 : 1
        palette: timelineRoot.palette

        background: Rectangle {
            id: backgroundRect
            color: labelC.text ? "transparent" : backgroundColor
        }

        onAccepted: c.accepted()
        onEditingFinished: c.editingFinished()
        onTextEdited: c.textEdited()
    }
    Rectangle {
        id: blueBar
        Layout.fillWidth: true
        color: timelineRoot.palette.highlight
        height: 1

        Rectangle {
            id: blackBar
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.top: parent.top
            color: timelineRoot.palette.text
            height: parent.height * 2
            width: 0

            states: State {
                name: "focused"
                when: input.activeFocus == true

                PropertyChanges {
                    target: blackBar
                    width: blueBar.width
                }
            }
            transitions: Transition {
                from: ""
                reversible: true
                to: "focused"

                NumberAnimation {
                    alwaysRunToEnd: true
                    duration: 310
                    easing.type: Easing.InCubic
                    properties: "width"
                    target: blackBar
                }
            }
        }
    }
    HoverHandler {
        id: hover
        enabled: c.ToolTip.text
    }
}