import QtQuick 2.4
import Ubuntu.Components 1.3
import Dekko.Theme 0.2
import Dekko.Settings 0.2
import Dekko.Composition 0.2
import "../UCSComponents"
import "../Composer"
import "../Utils"

PageWithBottomEdge {
    id: mainStage


    function replyToMessage(replyType) {
        //TODO: setReplyMessage in composer.
        bottomEdgePage.replyMode = replyType
        openBottomEdge()
    }

    function replyToMessagePart(replyType, replyPart) {
        bottomEdgePage.replyPart = replyPart
        bottomEdgePage.replyMode = replyType
        openBottomEdge()
    }

    anchors.fill: parent
    property Component leftStage: StageLeft{}
    property Component rightStage: StageRight{}
    property alias showDivider: divider.visible
    // We place the layouts inside this item that way
    // we can have a smart bottom edge that doesn't need to be on every page
    // and will constantly sit above the layouts even as we push new pages etc
    Item {
        id: hiddenContainer
        // hide all the items but fill the parent so they are at the correct size
        // before reparenting
//        visible: false
        width: units.gu(50)
        anchors {
            top: parent.top
            left: parent.right
            bottom: parent.bottom
        }

        StageArea {
            id: msgView
            baseUrl: GlobalSettings.developer.enableThreading ?
                         Qt.resolvedUrl("../MessageView/ThreadViewPage.qml") :
                         Qt.resolvedUrl("../MessageView/OneMessagePage.qml")
        }
    }

    Component.onCompleted: {
        msgList.parent = leftPanel
        if (!dekko.viewState.isSmallFF) {
            msgView.parent = rightLoader
        }
    }


    Connections {
        target: dekko.currentAccount.singleThreadModel
        onThreadRootChanged: {
            console.log("<< [MainStage] threadRootChanged start >> ")
            console.log("Message is selected: ", dekko.currentAccount.singleThreadModel.hasValidIndex)
            if (!dekko.currentAccount.singleThreadModel.hasValidIndex) {
                if (dekko.viewState.isSmallFF) {
                    console.log("Were small FF going back to msglist")
                    msgView.parent = hiddenContainer
                    msgList.show()
                }
            } else {
                if (dekko.viewState.isSmallFF) {
                    console.log("Opening messageview. Reparenting msgview. to left panel")
                    msgView.parent = leftPanel
                    msgView.show()
                    msgList.hide()
                }
            }
            console.log("<< [MainStage] threadRootChanged end >> ")
        }
    }

    Connections {
        target: dekko.viewState
        onStateChanged: {
            if (!dekko.viewState.isSmallFF) {
                msgView.parent = rightLoader
                msgList.show()
            } else {
                if (dekko.currentAccount.singleThreadModel.hasValidIndex) {
                    msgView.parent = leftPanel
                    msgList.hide()
                } else {
                    msgView.parent = hiddenContainer
                    msgList.show()
                }
            }
        }
    }

    Item {
        id: container
        anchors.fill: parent
        property int defaultWidth: 0

        Item {
            id: leftPanel
            anchors {
                left: parent.left
                top: parent.top
                bottom: parent.bottom
            }
            readonly property int defaultWidth: dekko.viewState.isLargeFF ? units.gu(50) : units.gu(43.5)
            width: (container.width > units.gu(90) && !dekko.viewState.isSmallFF) ? defaultWidth : parent.width
            StageArea {
                id: msgList
                baseUrl: Qt.resolvedUrl("../MessageListView/MessageListPage.qml")
            }
        }

        Item {
            id: resizer
            height: parent.height
            onXChanged: {
                leftPanel.width = x
                container.defaultWidth = leftPanel.width
            }
        }

        Rectangle {
            id: divider
            visible: !dekko.viewState.isSmallFF
            anchors {
                left: leftPanel.right
                top: parent.top
                bottom: parent.bottom
            }
            width: visible ? units.dp(1) : 0
            color: Qt.rgba(0,0,0,0.075)
            MouseArea {
                id: resizerSensing
                enabled: divider.width > 0 && !dekko.viewState.isSmallFF
                anchors {
                    fill: parent
                    leftMargin: 0
                    rightMargin: enabled ? -units.gu(1.2) : 0
                }
                cursorShape: Qt.SizeHorCursor
                drag {
                    axis: Drag.XAxis
                    target: resizer
                    smoothed: false
                    minimumX: units.gu(30)
                    maximumX: units.gu(60)
                }
                onPressed: resizer.x = leftPanel.width
                onReleased: {
                    leftPanel.width = Qt.binding(function() {
                        if (container.width > units.gu(90) && !dekko.viewState.isSmallFF) {
                            return container.defaultWidth;
                        } else {
                            return container.width
                        }
                    })
                }
            }
        }

        Item {
            id: rightLoader
            visible: !dekko.viewState.isSmallFF
            anchors {
                left: divider.right
                top: parent.top
                bottom: parent.bottom
                right: parent.right
            }
        }
    }

    bottomEdgePageComponent: ComposePage {
        id: composePage
        replyMode: ReplyMode.REPLY_NONE
        pageTitle: qsTr("New Message")
        isOpen: bottomEdgeExpanded
        isBottomEdgeMode: true
    }
    bottomEdgeEnabled: (dekko.viewState.isSmallFF &&
                       !dekko.currentAccount.singleThreadModel.hasValidIndex)

    bottomEdgeContainer.width: dekko.viewState.isSmallFF ? parent.width : rightLoader.width

    hintIconColor: Style.common.text
}
