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"
    Layout.fillWidth: true

    FluScrollablePage {
        id: edit_page
        anchors.fill: parent
        leftPadding: 5
        topPadding: 5
        rightPadding: 5
        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: 30

            FluIconButton {
                id: button_edit
                iconSource: FluentIcons.Edit
                iconSize: 12
                visible: edit_page.isEditable
                anchors {
                    right: parent.right
                    verticalCenter: parent.verticalCenter
                }
                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
                iconSize: 12
                text: "取消"
                visible: false
                anchors {
                    right: parent.right
                    verticalCenter: parent.verticalCenter
                }
                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
                iconSize: 12
                text: "保存"
                visible: false
                anchors {
                    right: button_cancel.left
                    verticalCenter: parent.verticalCenter
                }
            }

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

                anchors {
                    right: button_save.left
                    verticalCenter: parent.verticalCenter
                }
            }

            FluIconButton {
                id: button_subfield
                iconSource: md_show_view.isPreviewShowing ? FluentIcons.ClosePane: FluentIcons.OpenPane
                iconSize: 12
                text: "分栏"
                visible: false
                onClicked: {
                    if(md_show_view.isEditShowing ^ md_show_view.isPreviewShowing) {
                        md_show_view.isEditShowing = true
                        md_show_view.isPreviewShowing = true
                    } else {
                        md_show_view.isEditShowing = true
                        md_show_view.isPreviewShowing = false
                    }
                }
                anchors {
                    right: button_preview.left
                    verticalCenter: parent.verticalCenter
                }
            }

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

            Layout.fillWidth: true
            implicitHeight: width * 8/16

            ScrollView {
                id: edit_show_view
                implicitWidth: parent.width / 2
                height: parent.height
                visible: md_show_view.isEditShowing
                TextArea {
                    id: textArea_edit
                    wrapMode: TextEdit.Wrap
                    background: Rectangle {
                            color: customTextArea.focus ? "#E0E0E0" : "white"
                            border.color: FluColors.Grey30
                            radius: 10
                        }
                }
            }

            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
                    background: Rectangle {
                            color: customTextArea.focus ? "#E0E0E0" : "white"
                            border.color: FluColors.Grey30
                            radius: 10
                        }
                    readOnly: true
                    MouseArea {
                        anchors.fill: parent
                        enabled: false
                    }
                }
            }
        }
    }
}