import QtQuick 2.14
import QtQuick.Controls 2.14
import QtQuick.Layouts 1.14
import QtQml 2.14
import QtQml.Models 2.14
import QtGraphicalEffects 1.0
import QtQuick.Dialogs 1.3

Rectangle {
    id: root

    color: activePalette.window
    height: 120
    
    readonly property double timeBegin: timeline.beginSeconds
    readonly property double timeEnd: timeline.endSeconds
    property double timeDuration: timeline.endSeconds - timeline.beginSeconds
    property double timeCursor: timeline.cursorSeconds
    property double rulerTimeBegin: timeline.rulerTimeBegin
    property double rulerTimeDuration: timeline.rulerTimeDuration
    property double rulerTimeEnd: timeline.rulerTimeBegin + timeline.rulerTimeDuration
    property real headWidth: 180
    function messageDialogOpen(text) {
        messageDialog.setText(text)
        messageDialog.open()
    }
    Dialog {
        id: messageDialog
        title: "Message"
        Text {
            id: message
            text: ""
            color: activePalette.text
            wrapMode: Text.WordWrap
        }
        function setText(text) {
            message.text = text
        }
        onAccepted: {
            console.log("accept messageDialog")
        }
        Component.onCompleted: visible = false
    }
    Row {
        id: timelineRow
        anchors.top: parent.top
        anchors.left: parent.left
        width: parent.width
        Rectangle {
            width: root.headWidth
            height: 36
            color: "transparent"
            Rectangle {
                id: cornerstone
                radius: 6
                width: root.headWidth - 25
                height: parent.height
                anchors.left: parent.left
                color: activePalette.dark
                border.color: activePalette.light
                border.width: 1
                z: 1
                Label {
                    anchors.left: parent.left
                    anchors.leftMargin: 5
                    anchors.verticalCenter: parent.verticalCenter
                    text: timeCursor >= 0
                           ? timeline.dateString(timeCursor) + ' ' + timeline.msTimeString(timeCursor)
                           : "Error: UTC Year < 70"
                    font.pointSize: 8
                     // "SimHei"
                    color: activePalette.text
                    horizontalAlignment: Text.AlignRight
                }
            }
        }
        Rectangle {
            id: ruler
            width: root.width - root.headWidth
            height: cornerstone.height
            color: activePalette.window
            Rectangle {
                width: parent.width
                height: 2
                color: activePalette.light
                anchors.bottom: parent.bottom
            }
            z: 1
            Rectangle {
                id: secondsRuler
                width: ruler.width
                height: ruler.height * 0.2
                color: 'transparent'
                anchors.left: parent.left
                anchors.bottom: parent.bottom
                Repeater {
                    model: Math.min(parent.width, Math.ceil(rulerTimeDuration))
                    Rectangle {
                        anchors.bottom: parent.bottom
                        width: 1
                        height: secondsRuler.height
                        color: activePalette.light
                        x: (Math.ceil(rulerTimeBegin) - rulerTimeBegin + index) * Math.max(1, parent.width / rulerTimeDuration)
                    }
                }
            }
            Rectangle {
                id: timeRuler
                width: ruler.width
                height: ruler.height * 0.3
                color: 'transparent'
                anchors.left: parent.left
                anchors.bottom: parent.bottom
                Repeater {
                    id: timeRulerRepeater
                    property var maxRulerNum: Math.ceil(ruler.width / 50)
                    model: Math.min(timeRulerRepeater.maxRulerNum, Math.floor(rulerTimeDuration))
                    property double x0: (Math.ceil(rulerTimeBegin) - rulerTimeBegin) * Math.max(1, parent.width / rulerTimeDuration)
                    property double deltaDuration: Math.ceil(rulerTimeDuration / model)
                    property double deltaX: parent.width * deltaDuration / rulerTimeDuration
                    Rectangle {
                        anchors.bottom: parent.bottom
                        width: 1
                        height: timeRuler.height
                        color: activePalette.light
                        x: timeRulerRepeater.x0 + index * timeRulerRepeater.deltaX
                        Label {
                            anchors.horizontalCenter: parent.horizontalCenter
                            anchors.bottom: parent.top
                            color: activePalette.text
                            // visible: (parent.x > 20)
                            text: timeline.timeString(Math.ceil(rulerTimeBegin) + index * timeRulerRepeater.deltaDuration)
                            
                            font.pointSize: 6.5
                        }
                    }
                }
            }
            MouseArea {
                anchors.fill: parent
                acceptedButtons: Qt.LeftButton
                scrollGestureEnabled: true
                hoverEnabled: true
                onWheel: {
                    timeline.rulerTimeDuration = rulerTimeDuration * Math.exp(-0.1 * wheel.angleDelta.y / 120)
                }
                onClicked: {
                    timeline.living = false
                    timeline.cursorSeconds = rulerTimeBegin + mouseX / ruler.width * rulerTimeDuration
                }
                onPositionChanged: {
                    if (!(pressedButtons & Qt.LeftButton)) { return; }
                    onClicked(mouse)
                }
            }
        }
    }

    property int trackHeight: 24
    ListView {
        id: multitrack
        anchors.top: timelineRow.bottom
        anchors.topMargin: 3
        anchors.left: timelineRow.left
        flickableDirection: Flickable.VerticalFlick
        boundsBehavior: Flickable.StopAtBounds
        width: timelineRow.width
        height: (root.height - timelineRow.height) * 0.75
        Layout.fillWidth: true
        Layout.fillHeight: true
        clip: true
        ScrollBar.vertical: ScrollBar {
            active: true
        }
        model: trackBuffers
        delegate: Loader { source: modelData.source == "" ? "DefaultTrack.qml" : modelData.source }
    }
    Column {
        id: timeCursorCol
        anchors.top: parent.top
        anchors.left: parent.left
        anchors.leftMargin: root.headWidth + (timeCursor - rulerTimeBegin) / rulerTimeDuration * (root.width - root.headWidth)
        Rectangle {
            anchors.horizontalCenter: parent.left
            width: 15
            height: ruler.height * 0.5
            color: "transparent"// "#CA4238"
            Image {
                anchors.fill: parent
                source: "file:png/cursor.png" // "#CC423B"
                fillMode: Image.PreserveAspectFit
                clip: true
            }
        }
        // Rectangle {
        //     anchors.horizontalCenter: parent.left
        //     width: 3
        //     height: ruler.height * 0.5
        //     color: "transparent"// "#CA4238"
        // }
        Rectangle {
            anchors.horizontalCenter: parent.left
            width: 1
            height: root.height
            color: "#802C23"
        }
    }

    Menu {
        id : menu
        title: "Control Panel Menu"

        MenuItem {
            text: "Control Panel Menu Item 01"
            
        }
    }
}