import QtQuick
import QtQuick.Controls
import QtQuick.Layouts

Item {
    width: parent.width/parent.childcount
    property var editMode: false
    property var text: ""
    property var value: ""
    property var color: "#262626"
    height: 58
    clip: true

    Label {
        text: parent.text
        visible: !tf.visible
        anchors.centerIn: parent
        font.family: customFontLoader.name
        font.pixelSize: 15
        color: parent.color
        anchors.verticalCenter: parent.verticalCenter
        verticalAlignment: Text.AlignHCenter
    }

    TextInput
    {
        id: tf
        visible: false
        width: parent.width
        height: parent.height
        font.pixelSize: 15
        horizontalAlignment: Text.AlignHCenter
        verticalAlignment: TextInput.AlignVCenter
        onTextChanged: {
            parent.value = text;
        }
        onEditingFinished: {
            parent.value = text;
            visible = false;
        }
    }
    Rectangle{
        visible: tf.visible
        width: parent.width / 2
        color: "#007EFF"
        height:1
        anchors.bottom: parent.bottom
        anchors.horizontalCenter: parent.horizontalCenter

    }
    MouseArea{
        anchors.fill: parent;
        visible: !tf.visible;
        onDoubleClicked: {

            if (parent.editMode == true)
            {
                tf.visible = true;
                tf.text = parent.text;
                tf.forceActiveFocus();
            }
        }
    }
}