import QtQuick
import QtQuick.Layouts
import QtQuick.Window
import QtQuick.Controls
import QtQuick.Controls.Basic
import QtWebEngine 1.2
import FluentUI

FluArea {
    id: edit_area
    paddings: 0
    backgroundColor: "#f9f9f9"
    property string noteId: "234"

    FluScrollablePage {
        id: edit_page
        anchors.fill: parent
        leftPadding: 10
        topPadding: 10
        rightPadding: 10
        bottomPadding: 0

        property string contentMd: "**ssijfdijgo**\ndfdgfdggggggggggggggggggggggggggggggggggggggggggggggggggg"
        property bool isEditing: false
        property bool isEditable: false

        Component.onCompleted: {
            edit_page.isEditable = true

            textArea_edit.text = edit_page.contentMd
            edit_page.contentMd = Qt.binding(
                        function() {
                            return textArea_edit.text
                        })
            textArea_preview.text = Qt.binding(
                        function() {
                            return edit_page.contentMd
                        })
        }

        Item {
            Layout.fillWidth: true
            implicitHeight: 50

            FluIconButton {
                id: button_edit
                iconSource: FluentIcons.Edit
                visible: true
                anchors {
                    right: parent.right
                }
                onClicked: {
                    button_edit.visible = false
                    button_save.visible = true
                    button_preview.visible = true
                    button_subfield.visible = true
                    button_editing.visible = true
                    button_cancel.visible = true
                }
            }

            FluIconButton {
                id: button_cancel
                iconSource: FluentIcons.Cancel
                text: "取消"
                visible: false
                anchors {
                    right: parent.right
                }
                onClicked: {
                    button_edit.visible = edit_page.isEditable
                    button_save.visible = false
                    button_preview.visible = false
                    button_subfield.visible = false
                    button_editing.visible = false
                    button_cancel.visible = false
                }
            }

            FluIconButton {
                id: button_save
                iconSource: FluentIcons.Save
                text: "保存"
                visible: false
                anchors {
                    right: button_cancel.left
                }
            }

            FluIconButton {
                id: button_preview
                iconSource: FluentIcons.PreviewLink
                text: "预览"
                visible: false
                onClicked: {
                    md_show_view.isEditShowing = false
                    md_show_view.isPreviewShowing = true
                }

                anchors {
                    right: button_save.left
                }
            }

            FluIconButton {
                id: button_subfield
                iconSource: md_show_view.isPreviewShowing ? FluentIcons.ClosePane: FluentIcons.OpenPane
                text: "分栏"
                visible: false
                onClicked: {
                    md_show_view.isEditShowing = true
                    md_show_view.isPreviewShowing = !md_show_view.isPreviewShowing
                }
                anchors {
                    right: button_preview.left
                }
            }

            FluIconButton {
                id: button_editing
                iconSource: FluentIcons.ClipboardList
                text: "编辑"
                visible: false
                onClicked: {
                    md_show_view.isEditShowing = true
                    md_show_view.isPreviewShowing = false
                }
                anchors {
                    right: button_subfield.left
                }
            }
        }
        SplitView {
            id: md_show_view
            property bool isEditShowing: false
            property bool isPreviewShowing: true

            Layout.fillWidth: true
            implicitHeight: 300
            ScrollView {
                id: edit_show_view
                implicitWidth: parent.width / 2
                height: parent.height
                visible: md_show_view.isEditShowing
                TextArea {
                    id: textArea_edit
                    wrapMode: TextEdit.Wrap
                }
            }

            ScrollView {
                id: preview_show_view
                implicitWidth: parent.width / 2
                height: parent.height
                visible: md_show_view.isPreviewShowing
                TextArea {
                    id: textArea_preview
                    wrapMode: TextEdit.Wrap
                    textFormat: TextEdit.MarkdownText
                }
            }
        }
    }
}