import QtQuick

import QtQuick.Controls
import QtQuick.Layouts

import Qt5Compat.GraphicalEffects

import com.yacreader.ComicModel 1.0

import com.yacreader.ComicInfo 1.0
import com.yacreader.ComicDB 1.0

import QtQuick.Controls.Basic

SplitView {
    orientation: Qt.Horizontal
    handle: Rectangle {
        border.width : 0
        implicitWidth: 10
        color: info_container.color
    }

    Rectangle {
        id: main
        clip: true

        Image {
            id: backgroundImg
            anchors.fill: parent
            source: backgroundImage
            fillMode: Image.PreserveAspectCrop
            smooth: true
            mipmap: true
            asynchronous : true
            cache: false //TODO clear cache only when it is needed
            opacity: 0
            visible: false
        }

        FastBlur {
            anchors.fill: backgroundImg
            source: backgroundImg
            radius: backgroundBlurRadius
            opacity: backgroundBlurOpacity
            visible: backgroundBlurVisible
        }

        color: backgroundColor
        width: parent.width - (info_container.visible ? info_container.width : 0)
        SplitView.fillWidth: true
        SplitView.minimumWidth: coverWidth + 100
        height: parent.height
        anchors.margins: 0

        Component {
            id: appDelegate
            Rectangle
            {
                id: cell
                width: grid.cellWidth
                height: grid.cellHeight
                color: "#00000000"

                scale: mouseArea.containsMouse ? 1.025 : 1

                Behavior on scale {
                    NumberAnimation { duration: 90 }
                }

                BorderImage {
                    anchors {
                        top: realCell.top
                        left: realCell.left
                        right: realCell.right
                        bottom: realCell.bottom
                        margins: -10
                    }
                    border { left: 10; top: 10; right: 10; bottom: 10 }
                    horizontalTileMode: BorderImage.Stretch
                    verticalTileMode: BorderImage.Stretch
                    source: "prerendered_cover_shadow.png"
                    visible: showDropShadow
                }

                Rectangle {
                    id: realCell

                    property int position : 0
                    property bool dragging: false;
                    Drag.active: mouseArea.drag.active
                    Drag.hotSpot.x: 32
                    Drag.hotSpot.y: 32
                    Drag.dragType: Drag.Automatic
                    //Drag.mimeData: { "x": 1 }
                    Drag.proposedAction: Qt.CopyAction
                    Drag.onActiveChanged: {
                        if(!dragging)
                        {
                            dragManager.startDrag();
                            dragging = true;
                        }else
                            dragging = false;
                    }

                    width: itemWidth
                    height: itemHeight

                    color: ((dummyValue || !dummyValue) && comicsSelectionHelper.isSelectedIndex(index))?selectedColor:cellColor;
                    //border.color: ((dummyValue || !dummyValue) && comicsSelectionHelper.isSelectedIndex(index))?selectedBorderColor:borderColor;
                    //border.width: ?1:0;
                    anchors.horizontalCenter: parent.horizontalCenter

                    Rectangle
                    {
                        id: mouseOverBorder

                        property bool commonBorder : false

                        property int lBorderwidth : 2
                        property int rBorderwidth : 2
                        property int tBorderwidth : 2
                        property int bBorderwidth : 2

                        property int commonBorderWidth : 1

                        z : -1

                        color: "#00000000"

                        anchors
                        {
                            left: parent.left
                            right: parent.right
                            top: parent.top
                            bottom: parent.bottom

                            topMargin    : commonBorder ? -commonBorderWidth : -tBorderwidth
                            bottomMargin : commonBorder ? -commonBorderWidth : -bBorderwidth
                            leftMargin   : commonBorder ? -commonBorderWidth : -lBorderwidth
                            rightMargin  : commonBorder ? -commonBorderWidth : -rBorderwidth
                        }

                        border.color: selectedBorderColor
                        border.width: 3

                        opacity: (dummyValue || !dummyValue) && comicsSelectionHelper.isSelectedIndex(index) ? 1 : 0

                        Behavior on opacity {
                            NumberAnimation { duration: 300 }
                        }

                        radius : 2
                    }


                    MouseArea  {
                        id: mouseArea
                        drag.target: realCell

                        drag.minimumX: 0
                        drag.maximumX: 0
                        drag.minimumY: 0
                        drag.maximumY: 0

                        anchors.fill: parent
                        acceptedButtons: Qt.LeftButton | Qt.RightButton

                        hoverEnabled: true

                        onDoubleClicked: {
                            comicsSelectionHelper.clear();

                            comicsSelectionHelper.selectIndex(index);
                            grid.currentIndex = index;
                            currentIndexHelper.selectedItem(index);
                        }

                        function selectAll(from,to)
                        {
                            for(var i = from;i<=to;i++)
                            {
                                comicsSelectionHelper.selectIndex(i);
                            }
                        }

                        onPressed: mouse => {
                                       var ci = grid.currentIndex; //save current index

                                       /*if(mouse.button != Qt.RightButton && !(mouse.modifiers & Qt.ControlModifier || mouse.modifiers & Qt.ShiftModifier))
                        {
                            if(!comicsSelectionHelper.isSelectedIndex(index))
                                comicsSelectionHelper.clear();
                        }*/

                                       if(mouse.modifiers & Qt.ShiftModifier)
                                       if(index < ci)
                                       {
                                           selectAll(index,ci);
                                           grid.currentIndex = index;
                                       }
                                       else if (index > ci)
                                       {
                                           selectAll(ci,index);
                                           grid.currentIndex = index;
                                       }

                                       mouse.accepted = true;

                                       if(mouse.button === Qt.RightButton) // context menu is requested
                                       {
                                           if(!comicsSelectionHelper.isSelectedIndex(index)) //the context menu is requested outside the current selection, the selection will be
                                           {
                                               currentIndexHelper.setCurrentIndex(index)
                                               grid.currentIndex = index;
                                           }

                                           var coordinates = main.mapFromItem(realCell,mouseX,mouseY)
                                           contextMenuHelper.requestedContextMenu(Qt.point(coordinates.x,coordinates.y));
                                           mouse.accepted = false;

                                       } else //left button
                                       {

                                           if(mouse.modifiers & Qt.ControlModifier)
                                           {
                                               if(comicsSelectionHelper.isSelectedIndex(index))
                                               {
                                                   if(comicsSelectionHelper.numItemsSelected()>1)
                                                   {
                                                       comicsSelectionHelper.deselectIndex(index);
                                                       if(grid.currentIndex === index)
                                                       grid.currentIndex = comicsSelectionHelper.lastSelectedIndex();
                                                   }
                                               }
                                               else
                                               {
                                                   comicsSelectionHelper.selectIndex(index);
                                                   grid.currentIndex = index;
                                               }
                                           }

                                           if(mouse.button !== Qt.RightButton && !(mouse.modifiers & Qt.ControlModifier || mouse.modifiers & Qt.ShiftModifier)) //just left button click
                                           {
                                               if(comicsSelectionHelper.isSelectedIndex(index)) //the context menu is requested outside the current selection, the selection will be
                                               {

                                               }
                                               else
                                               {
                                                   currentIndexHelper.setCurrentIndex(index)
                                               }

                                               grid.currentIndex = index;
                                           }
                                       }

                                   }

                        onReleased: mouse => {
                                        if(mouse.button === Qt.LeftButton && !(mouse.modifiers & Qt.ControlModifier || mouse.modifiers & Qt.ShiftModifier))
                                        {
                                            if(comicsSelectionHelper.isSelectedIndex(index))
                                            {
                                                currentIndexHelper.setCurrentIndex(index)
                                                grid.currentIndex = index;
                                            }
                                        }
                                    }
                    }
                }

                /**/

                //cover
                Image {
                    id: coverElement
                    width: coverWidth
                    height: coverHeight
                    anchors {horizontalCenter: parent.horizontalCenter; top: realCell.top; topMargin: 0}
                    source: cover_path
                    fillMode: Image.PreserveAspectCrop
                    smooth: true
                    mipmap: true
                    asynchronous : true
                    cache: false //TODO clear cache only when it is needed

                }

                //is new
                Rectangle {
                    width: 10
                    height: 10
                    radius: 5
                    anchors { left: coverElement.left; top: coverElement.top; topMargin: 5; leftMargin: 5; }
                    color: "#FFFFCC00"
                    visible: (((new Date() / 1000) - added_date) < recent_range) && show_recent
                }

                //border
                Rectangle {
                    width: coverElement.width
                    height: coverElement.height
                    anchors {horizontalCenter: parent.horizontalCenter; top: realCell.top; topMargin: 0}
                    color: "transparent"
                    border {
                        color: "#20FFFFFF"
                        width: 1
                    }
                }

                //mark
                Image {
                    id: mark
                    width: 23
                    height: 23
                    source: read_column&&show_marks?"tick.png":has_been_opened&&show_marks?"reading.png":""
                    anchors {right: coverElement.right; top: coverElement.top; topMargin: 9; rightMargin: 9}
                    asynchronous : true
                }

                //title
                Text {
                    id : titleText
                    anchors { top: coverElement.bottom; left: realCell.left; leftMargin: 4; rightMargin: 4; topMargin: 4; }
                    width: itemWidth - 8
                    maximumLineCount: 2
                    wrapMode: Text.WordWrap
                    text: title
                    elide: Text.ElideRight
                    color: titleColor
                    clip: true
                    font.letterSpacing: fontSpacing
                    font.pointSize: fontSize
                    font.family: fontFamily
                }

                //number
                Text {
                    anchors {bottom: realCell.bottom; left: realCell.left; margins: 4}
                    text: number?"<b>#</b>"+number:""
                    color: textColor
                    font.letterSpacing: fontSpacing
                    font.pointSize: fontSize
                    font.family: fontFamily
                }

                //page icon
                Image {
                    id: pageImage
                    anchors {bottom: realCell.bottom; right: realCell.right; bottomMargin: 5; rightMargin: 4; leftMargin: 4}
                    source: "page.png"
                    width: 8
                    height: 10
                }

                //numPages
                Text {
                    id: pages
                    anchors {bottom: realCell.bottom; right: pageImage.left; margins: 4}
                    text: has_been_opened?current_page+"/"+num_pages:num_pages
                    color: textColor
                    font.letterSpacing: fontSpacing
                    font.pointSize: fontSize
                    font.family: fontFamily
                }

                //rating icon
                Image {
                    id: ratingImage
                    anchors {bottom: realCell.bottom; right: pageImage.left; bottomMargin: 5; rightMargin: Math.floor(pages.width)+12}
                    source: "star.png"
                    width: 13
                    height: 11

                    MouseArea  {
                        anchors.fill: parent
                        onPressed: {
                            console.log("rating");
                            comicsSelectionHelper.clear();
                            comicsSelectionHelper.selectIndex(index);
                            grid.currentIndex = index;
                            ratingLoader.active = true;
                            ratingLoader.item.popup();
                           }
                       }

                       Loader {
                           id: ratingLoader
                           active: false
                           sourceComponent: ratingConextMenuComponent
                       }

                       Component {
                           id: ratingConextMenuComponent
                           Menu {
                               background: Rectangle {
                                   implicitWidth: 42
                                   implicitHeight: 100
                               }

                               id: ratingConextMenu

                               Action { text: "1"; enabled: true; onTriggered: comicRatingHelper.rate(index,1) }
                               Action { text: "2"; enabled: true; onTriggered: comicRatingHelper.rate(index,2) }
                               Action { text: "3"; enabled: true; onTriggered: comicRatingHelper.rate(index,3) }
                               Action { text: "4"; enabled: true; onTriggered: comicRatingHelper.rate(index,4) }
                               Action { text: "5"; enabled: true; onTriggered: comicRatingHelper.rate(index,5) }

                               delegate: MenuItem {
                                   implicitHeight: 30
                               }
                           }
                       }
                }

                //comic rating
                Text {
                    id: comicRating
                    anchors {bottom: realCell.bottom; right: ratingImage.left; margins: 4}
                    text: rating>0?rating:"-"
                    color: textColor
                }
            }
        }

        Rectangle {
            id: scrollView
            objectName: "topScrollView"
            anchors.fill: parent
            anchors.margins: 0
            children: grid

            color: "transparent"

            function scrollToOrigin() {
                grid.contentY = grid.originY
                grid.contentX = grid.originX
            }

            property Component currentComicView: Component {
                id: currentComicView
                Rectangle {
                    id: currentComicViewTopView
                    color: "#00000000"

                    height: showCurrentComic ? 270 : 20

                    Rectangle {
                        color: currentComicBackgroundColor

                        id: currentComicVisualView

                        width: main.width
                        height: 250

                        visible: showCurrentComic

                        //cover
                        Image {
                            id: currentCoverElement
                            anchors.fill: parent

                            anchors.leftMargin: 15
                            anchors.topMargin: 15
                            anchors.bottomMargin: 15
                            anchors.rightMargin: 15
                            horizontalAlignment: Image.AlignLeft
                            anchors {horizontalCenter: parent.horizontalCenter; top: parent.top; topMargin: 0}
                            source: comicsList.getCoverUrlPathForComicHash(currentComicInfo.hash.toString())
                            fillMode: Image.PreserveAspectFit
                            smooth: true
                            mipmap: true
                            asynchronous : true
                            cache: false //TODO clear cache only when it is needed
                        }

                        DropShadow {
                            anchors.fill: currentCoverElement
                            horizontalOffset: 0
                            verticalOffset: 0
                            radius: 8.0
                            transparentBorder: true
                            //samples: 17
                            color: "#FF000000"
                            source: currentCoverElement
                            visible: showDropShadow;
                        }

                        ColumnLayout
                        {
                            id: currentComicInfoView

                            x: currentCoverElement.anchors.rightMargin + currentCoverElement.paintedWidth + currentCoverElement.anchors.rightMargin
                            //y: currentCoverElement.anchors.topMargin

                            anchors.top: currentCoverElement.top
                            anchors.right: parent.right
                            anchors.left: readButton.left

                            spacing: 9

                            Text {
                                Layout.topMargin: 7
                                Layout.fillWidth: true
                                Layout.rightMargin: 20

                                Layout.alignment: Qt.AlignTop | Qt.AlignLeft

                                id: currentComicInfoTitleView

                                color: infoTitleColor
                                font.family: "Arial"
                                font.bold: true
                                font.pixelSize: 21
                                wrapMode: Text.WordWrap

                                text: currentComic?.getTitleIncludingNumber() ?? ""
                            }

                            Flow {
                                spacing: 0
                                Layout.alignment: Qt.AlignTop | Qt.AlignLeft
                                Layout.fillWidth: true
                                Layout.fillHeight: false

                                id: currentComicDetailsFlowView
                                property font infoFont: Qt.font({
                                                                    family: "Arial",
                                                                    pixelSize: 14
                                                                });
                                property string infoFlowTextColor: infoTextColor

                                Text {
                                    id: currentComicInfoVolume
                                    color: currentComicDetailsFlowView.infoFlowTextColor
                                    font: currentComicDetailsFlowView.infoFont
                                    text: currentComicInfo.volume ? currentComicInfo.volume : ""
                                    rightPadding: 20
                                    visible: currentComicInfo.volume ? true : false
                                }

                                Text {
                                    id: currentComicInfoNumbering
                                    color: currentComicDetailsFlowView.infoFlowTextColor
                                    font: currentComicDetailsFlowView.infoFont
                                    text: currentComicInfo.number + "/" + currentComicInfo.count
                                    rightPadding: 20
                                    visible : currentComicInfo.number ? true : false
                                }

                                Text {
                                    id: currentComicInfoArc
                                    color: currentComicDetailsFlowView.infoFlowTextColor
                                    font: currentComicDetailsFlowView.infoFont
                                    text: currentComicInfo.getStoryArcInfoString()
                                    rightPadding: 20
                                    visible : currentComicInfo.getStoryArcInfoString().length > 0
                                }

                                Text {
                                    id: currentComicInfoAlternate
                                    color: currentComicDetailsFlowView.infoFlowTextColor
                                    font: currentComicDetailsFlowView.infoFont
                                    text: currentComicInfo.getAlternateSeriesString()
                                    rightPadding: 20
                                    visible : currentComicInfo.getStoryArcInfoString().length > 0
                                }

                                Text {
                                    id: currentComicInfoSeriesGroup
                                    color: currentComicDetailsFlowView.infoFlowTextColor
                                    font: currentComicDetailsFlowView.infoFont
                                    text: currentComicInfo.seriesGroup ? currentComicInfo.seriesGroup : ""
                                    rightPadding: 20
                                    visible: currentComicInfo.seriesGroup ? true : false
                                }

                                Text {
                                    id: currentComicInfoGenre
                                    color: currentComicDetailsFlowView.infoFlowTextColor
                                    font: currentComicDetailsFlowView.infoFont
                                    text: currentComicInfo.genere ? currentComicInfo.genere : ""
                                    rightPadding: 20
                                    visible: currentComicInfo.genere ? true : false
                                }

                                Text {
                                    id: currentComicInfoDate
                                    color: currentComicDetailsFlowView.infoFlowTextColor
                                    font: currentComicDetailsFlowView.infoFont
                                    text: currentComicInfo.date ? currentComicInfo.date : ""
                                    rightPadding: 20
                                    visible: currentComicInfo.date ? true : false
                                }

                                Text {
                                    id: currentComicInfoPages
                                    color: currentComicDetailsFlowView.infoFlowTextColor
                                    font: currentComicDetailsFlowView.infoFont
                                    text: (currentComicInfo.numPages ? currentComicInfo.numPages : "") + " pages"
                                    rightPadding: 20
                                    visible: currentComicInfo.numPages ? true : false
                                }

                                Text {
                                    id: currentComicInfoShowInComicVine
                                    font: currentComicDetailsFlowView.infoFont
                                    color: "#ffcc00"
                                    text: "Show in Comic Vine"
                                    visible: currentComicInfo.comicVineID ? true : false
                                    MouseArea {
                                        anchors.fill: parent
                                        onClicked: {
                                            Qt.openUrlExternally("http://www.comicvine.com/comic/4000-%1/".arg(comicInfo.comicVineID));
                                        }
                                    }
                                }
                            }

                            ScrollView {
                                Layout.topMargin: 6
                                Layout.rightMargin: 30
                                Layout.bottomMargin: 5
                                Layout.fillWidth: true
                                Layout.maximumHeight: (currentComicVisualView.height * 0.32)
                                Layout.maximumWidth: 960

                                ScrollBar.horizontal.policy: ScrollBar.AlwaysOff

                                contentWidth: -1
                                contentItem: currentComicInfoSinopsis

                                id: synopsisScroller

                                clip: true

                                Text {
                                    Layout.maximumWidth: 960

                                    width: synopsisScroller.width

                                    id: currentComicInfoSinopsis
                                    color: infoTitleColor
                                    font.family: "Arial"
                                    font.pixelSize: 14
                                    wrapMode: Text.WordWrap

                                    text: '<html><head><style>
                                a {
                                    color: #FFCB00;
                                    text-decoration:none;
                                }
                                </style></head><body>' + currentComicInfo.synopsis ?? "" + '</body></html>'
                                    visible: currentComicInfo.synopsis ?? false
                                                                          textFormat: Text.RichText
                                }
                            }
                        }

                        Button {
                            containmentMask: null
                            text: "Read"
                            id: readButton
                            x: currentCoverElement.anchors.rightMargin + currentCoverElement.paintedWidth + currentCoverElement.anchors.rightMargin
                            anchors.bottom: currentCoverElement.bottom
                            anchors.bottomMargin: 15

                            onClicked: comicOpener.triggerOpenCurrentComic()
                            background: Rectangle {
                                implicitWidth: 100
                                implicitHeight: 30
                                border.width: readButton.activeFocus ? 2 : 1
                                border.color: "#FFCC00"
                                radius: height / 2
                                color: "#FFCC00"
                            }

                            contentItem: Text {
                                renderType: Text.NativeRendering
                                verticalAlignment: Text.AlignVCenter
                                horizontalAlignment: Text.AlignHCenter
                                font.family: "Arial"
                                font.pointSize: 12
                                font.bold: true
                                color: "white"
                                text: readButton.text
                            }
                        }


                        DropShadow {
                            anchors.fill: readButton
                            transparentBorder: true
                            horizontalOffset: 0
                            verticalOffset: 0
                            radius: 8.0
                            //samples: 17
                            color: "#AA000000"
                            source: readButton
                            visible: showDropShadow && !readButton.pressed
                        }
                    }
                }
            }

            GridView {
                id:grid
                objectName: "grid"
                anchors.fill: parent
                cellHeight: cellCustomHeight
                header: currentComicView
                focus: true
                model: comicsList
                delegate: appDelegate
                anchors.topMargin: 0
                anchors.bottomMargin: 10
                anchors.leftMargin: 0
                anchors.rightMargin: 0
                pixelAligned: true
                highlightFollowsCurrentItem: true

                currentIndex: 0
                cacheBuffer: 0

                interactive: true

                move: Transition {
                    NumberAnimation { properties: "x,y"; duration: 250 }
                }

                moveDisplaced: Transition {
                    NumberAnimation { properties: "x,y"; duration: 250 }
                }

                remove: Transition {
                    ParallelAnimation {
                        NumberAnimation { property: "opacity"; to: 0; duration: 250 }

                    }
                }

                removeDisplaced: Transition {
                    NumberAnimation { properties: "x,y"; duration: 250 }
                }



                displaced: Transition {
                    NumberAnimation { properties: "x,y"; duration: 250 }
                }

                function numCellsPerRow() {
                    return Math.floor(width / cellCustomWidth);
                }

                onWidthChanged: {
                    calculateCellWidths(cellCustomWidth);
                }

                function calculateCellWidths(cWidth) {
                    var wholeCells = Math.floor(width / cWidth);
                    var rest = width - (cWidth * wholeCells)

                    grid.cellWidth = cWidth + Math.floor(rest / wholeCells);
                }

                WheelHandler {
                    onWheel: {
                        if (grid.contentHeight <= grid.height) {
                            return;
                        }

                        var newValue =  Math.min((grid.contentHeight - grid.height + grid.originY), (Math.max(grid.originY , grid.contentY - event.angleDelta.y)));
                        grid.contentY = newValue;
                    }
                }

                ScrollBar.vertical: ScrollBar {
                    visible: grid.contentHeight > grid.height

                    contentItem: Item {
                        implicitWidth: 12
                        implicitHeight: 26
                        Rectangle {
                            color: "#88424242"
                            anchors.fill: parent
                            anchors.topMargin: 6
                            anchors.leftMargin: 3
                            anchors.rightMargin: 2
                            anchors.bottomMargin: 6
                            border.color: "#AA313131"
                            border.width: 1
                            radius: 3.5
                        }
                    }
                }

                Keys.onPressed: {
                    if (event.modifiers & Qt.ControlModifier || event.modifiers & Qt.ShiftModifier) {
                        event.accepted = true
                        return;
                    }

                    var numCells = grid.numCellsPerRow();
                    var ci = 0;
                    if (event.key === Qt.Key_Right) {
                        ci = Math.min(grid.currentIndex+1,grid.count - 1);
                    }
                    else if (event.key === Qt.Key_Left) {
                        ci = Math.max(0,grid.currentIndex-1);
                    }
                    else if (event.key === Qt.Key_Up) {
                        ci = Math.max(0,grid.currentIndex-numCells);
                    }
                    else if (event.key === Qt.Key_Down) {
                        ci = Math.min(grid.currentIndex+numCells,grid.count - 1);
                    } else {
                        return;
                    }

                    event.accepted = true;
                    grid.currentIndex = -1
                    comicsSelectionHelper.clear();
                    currentIndexHelper.setCurrentIndex(ci);
                    grid.currentIndex = ci;
                }

                DropArea {
                    anchors.fill: parent

                    onEntered: drag => {
                                   if(drag.hasUrls)
                                   {
                                       if(dropManager.canDropUrls(drag.urls, drag.action))
                                       {
                                           drag.accepted = true;
                                       }else
                                       drag.accepted = false;
                                   }
                                   else if (dropManager.canDropFormats(drag.formats)) {
                                       drag.accepted = true;
                                   } else
                                   drag.accepted = false;
                               }

                    onDropped: drop => {
                                   if(drop.hasUrls && dropManager.canDropUrls(drop.urls, drop.action))
                                   {
                                       dropManager.droppedFiles(drop.urls, drop.action);
                                   }
                                   else{
                                       if (dropManager.canDropFormats(drop.formats))
                                       {
                                           var destItem = grid.itemAt(drop.x,drop.y + grid.contentY);
                                           var destLocalX = grid.mapToItem(destItem,drop.x,drop.y + grid.contentY).x
                                           var realIndex = grid.indexAt(drop.x,drop.y + grid.contentY);

                                           if(realIndex === -1)
                                           realIndex = grid.count - 1;

                                           var destIndex = destLocalX < (grid.cellWidth / 2) ? realIndex : realIndex + 1;
                                           dropManager.droppedComicsForResortingAt("", destIndex);
                                       }
                                   }
                               }
                }
            }
        }
    }

    Rectangle {
        id: info_container
        objectName: "infoContainer"
        SplitView.preferredWidth: 350
        SplitView.minimumWidth: 350
        SplitView.maximumWidth: 960
        height: parent.height

        color: infoBackgroundColor

        visible: showInfo

        Flickable{
            id: infoFlickable
            anchors.fill: parent
            anchors.margins: 0

            contentWidth: infoView.width
            contentHeight: infoView.height

            ComicInfoView {
                id: infoView
                width: info_container.width
            }

            WheelHandler {
                onWheel: {
                    if (infoFlickable.contentHeight <= infoFlickable.height) {
                        return;
                    }

                    var newValue =  Math.min((infoFlickable.contentHeight - infoFlickable.height), (Math.max(infoFlickable.originY , infoFlickable.contentY - event.angleDelta.y)));
                    infoFlickable.contentY = newValue;
                }
            }

            ScrollBar.vertical: ScrollBar {
                visible: infoFlickable.contentHeight > infoFlickable.height

                contentItem: Item {
                    implicitWidth: 12
                    implicitHeight: 26
                    Rectangle {
                        color: "#424246"
                        anchors.fill: parent
                        anchors.topMargin: 6
                        anchors.leftMargin: 5
                        anchors.rightMargin: 4
                        anchors.bottomMargin: 6
                        radius: 2
                    }
                }
            }
        }

    }
}
