import QtQuick
import QtQuick.Controls
import QtQuick.Layouts

import "../Editor"

SplitView {
    Layout.fillHeight: true
    Layout.fillWidth: true
    anchors.fill: parent

    // Customized handle to drag between the Navigation and the Editor.
    handle: Rectangle {
        border.color: SplitHandle.hovered ? "#303234" : "#3c3f41"
        color: SplitHandle.pressed ? "#4b4f51" : "#3c3f41"
        implicitWidth: 8
        opacity: SplitHandle.hovered || navigationView.width < 15 ? 1.0 : 0.0

        Behavior on opacity {
            OpacityAnimator {
                duration: 1400
            }
        }
    }

    Rectangle {
        id: navigationView

        SplitView.fillHeight: true
        SplitView.preferredWidth: 200
        color: "#303234"

        StackLayout {
            anchors.fill: parent

            // Shows the help text.
            TextArea {
                placeholderText: qsTr("File system view placeholder")
                placeholderTextColor: "white"
                readOnly: true
                wrapMode: TextArea.Wrap
            }

            // TODO: Shows the files on the file system.
            // ClideTreeView {
            //     id: fileSystemView
            //     color: Colors.surface1
            //     onFileClicked: path => root.currentFilePath = path
            // }
        }
    }
    ClideEditor {
    }
}