import QtQuick 2.15
import QtQuick.Controls 2.15 as Controls
import QtQuick.Layouts 1.2
import org.kde.kirigami 2.13 as Kirigami
import "./" as Presenter
import org.presenter 1.0

Item {
    id: root
    // Lets set the outerModelData so we can access that data here.
    property var outerModelData: model;

    implicitHeight: Kirigami.Units.gridUnit * 6.5
    implicitWidth: {
        let slides = outerModelData.slideNumber === 0 ? 1 : outerModelData.slideNumber
        return Kirigami.Units.gridUnit * 10 * slides + Kirigami.Units.smallSpacing * 2;
    }

    Rectangle {
        id: previewHighlight
        width: parent.width
        height: parent.height
        border.color: Kirigami.Theme.highlightColor
        radius: 5
        color: {
            if (active || previewerMouse.containsMouse)
                Kirigami.Theme.highlightColor
            else
                Kirigami.Theme.backgroundColor
        }

        Row {
            id: slidesList
            spacing: Kirigami.Units.smallSpacing * 2
            anchors.fill: parent
            padding: Kirigami.Units.smallSpacing * 2
            Repeater {
                id: slidesListRepeater
                model: outerModelData.slideNumber === 0 ? 1 : outerModelData.slideNumber
                Component.onCompleted: {
                    if (name === "Death Was Arrested") {
                        console.log("Number of slides: " + outerModelData.slideNumber);
                        console.log("model number: " + model);
                    }
                }
                /* Rectangle { width: 20; height: 20; radius: 10; color: "green" } */
                Presenter.Slide {
                    id: previewSlideItem
                    implicitWidth: Kirigami.Units.gridUnit * 10 - Kirigami.Units.smallSpacing * 2
                    implicitHeight: width / 16 * 9
                    textSize: width / 4
                    itemType: outerModelData.type
                    imageSource: outerModelData.backgroundType === "image" ? background : ""
                    videoSource: outerModelData.backgroundType === "video" ? background : ""
                    audioSource: ""
                    chosenFont: outerModelData.font
                    text: outerModelData.text[index] === "This is demo text" ? "" : outerModelData.text[index]
                    pdfIndex: outerModelData.type != "presentation" ? 0 : index
                    preview: true
                    editMode: true

                    MouseArea {
                        id: innerMouse
                        anchors.fill: parent
                        hoverEnabled: true
                        onClicked: changeSlideAndIndex(outerModelData, index)
                        cursorShape: Qt.PointingHandCursor
                    }

                    Rectangle {
                        id: activeHighlightBar
                        width: previewSlideItem.width
                        height: Kirigami.Units.gridUnit / 4
                        anchors.top: previewSlideItem.bottom
                        anchors.left: previewSlideItem.left
                        anchors.topMargin: Kirigami.Units.smallSpacing
                        color: Kirigami.Theme.negativeTextColor
                        visible: outerModelData.active && SlideObject.slideIndex == index - 1
                    }
                }
            }
        }

        Controls.Label {
            id: slidesTitle
            width: parent.width * 7
            anchors.top: slidesList.bottom
            anchors.leftMargin: Kirigami.Units.smallSpacing * 8
            anchors.topMargin: 5
            elide: Text.ElideRight
            text: name + " " + slidesListRepeater.model
            /* font.family: "Quicksand Bold" */
        }

        MouseArea {
            id: previewerMouse
            anchors.fill: parent
            hoverEnabled: true
            /* onClicked: changeServiceItem(index) */
            cursorShape: Qt.PointingHandCursor
            propagateComposedEvents: true
        }


        Connections {
            target: serviceItemModel
            onDataChanged: if (active)
                previewSlidesList.positionViewAtIndex(index, ListView.Center)
        }
    }

    function changeSlideAndIndex(serviceItem, index) {
        // TODO
        console.log("Item: " + serviceItem.index + " is " + serviceItem.active);
        if (!serviceItem.active)
            changeServiceItem(serviceItem.index)
        console.log("Slide Index is: " + index);
        if (index === 0)
            return;
        SlideObject.changeSlideIndex(index);
        console.log("New slide index is: " + SlideObject.slideIndex);
    }
}