import QtQuick 2.12
import QtQuick.Layouts 1.12
import QtQuick.Controls 2.5
import AppControls2 1.0 as AppControls2
import org.ukui.menu.core 1.0

MouseArea {
    id: control
    property bool editStatus: false
    property bool truncate: false
    property bool isSelect: false
    hoverEnabled: true
    ToolTip.visible: !editStatus && truncate && control.containsMouse
    ToolTip.text: name
    ToolTip.delay: 500
    states: State {
        when: control.activeFocus
        PropertyChanges {
            target: controlBase
            alpha: 0.55
        }
    }

    StyleBackground {
        id: controlBase
        anchors.fill: parent
        radius: 4
        useStyleTransparent: false
        alpha: isSelect ? 0.55 : control.containsPress ? 0.82 : control.containsMouse ? 0.55 : 0.00

        RowLayout {
            anchors.fill: parent
            anchors.leftMargin: 12
            spacing: 12

            FolderIcon {
                rows: 2; columns: 2
                spacing: 2; padding: 2
                icons: icon
                alpha: 0.12; radius: 4
                Layout.alignment: Qt.AlignVCenter
                Layout.preferredWidth: 32
                Layout.preferredHeight: 32
            }

            Item {
                id: renameArea
                Layout.fillWidth: true
                Layout.fillHeight: true

                Component {
                    id: unEditText
                    StyleText {
                        id: textShow
                        verticalAlignment: Text.AlignVCenter
                        horizontalAlignment: Text.AlignLeft
                        elide: Text.ElideRight
                        text: name
                        onWidthChanged: {
                            control.truncate = textShow.truncated
                        }
                    }
                }

                Component {
                    id: editText
                    AppControls2.StyleBackground {
                        radius: 6
                        useStyleTransparent: false
                        alpha: textChange.activeFocus ? 0.04 : 0
                        paletteRole: Palette.Text
                        border.width: 2
                        borderAlpha: textChange.activeFocus ? 1 : 0
                        borderColor: Palette.Highlight

                        TextInput {
                            id: textChange
                            text: name
                            clip: true
                            anchors.left: parent.left
                            anchors.leftMargin: 8
                            anchors.right: buttonMouseArea.left
                            anchors.rightMargin: 8
                            anchors.verticalCenter: parent.verticalCenter
                            verticalAlignment: Text.AlignVCenter
                            selectByMouse: true
                            maximumLength: 14

                            function editStatusEnd() {
                                control.editStatus = false;
                                control.focus = true;
                            }

                            function updateTextInputColor() {
                                color = themePalette.paletteColor(Palette.Text);
                                selectionColor = themePalette.paletteColor(Palette.Highlight);
                            }

                            onEditingFinished: {
                                modelManager.getAppModel().renameFolder(id, text);
                                textChange.editStatusEnd();
                            }
                            Component.onCompleted: {
                                updateTextInputColor();
                                themePalette.styleColorChanged.connect(updateTextInputColor);
                                forceActiveFocus();
                            }
                            Component.onDestruction: themePalette.styleColorChanged.disconnect(updateTextInputColor);
                        }

                        MouseArea {
                            id: buttonMouseArea
                            hoverEnabled: true
                            width: 16; height: width
                            anchors.right: parent.right
                            anchors.rightMargin: 10
                            anchors.verticalCenter: parent.verticalCenter
                            visible: textChange.activeFocus

                            ThemeIcon {
                                anchors.centerIn: parent
                                width: 16; height: width
                                source: "image://appicon/edit-clear-symbolic"
                            }

                            onClicked: {
                                textChange.text = name;
                                textChange.editStatusEnd();
                            }
                        }
                    }
                }

                Loader {
                    id: editLoader
                    anchors.fill: parent
                    sourceComponent: editStatus ? editText : unEditText
                }
            }
        }
    }
}