import QtQuick 2.0
import Sailfish.Silica 1.0
import "../JSONListModel"

Page {
    id: page
    property string filter: ""
    property string showid: ""
    property string showname: ""
    property string showimage: ""

    SilicaListView {
         id: listView
         anchors.fill: parent
         clip: true

         JSONListModel {
             id: jsonModel1
             source: "http://api.tvmaze.com/shows/"+showid+"/seasons"
             query: "$[*]"
         }

         model: jsonModel1.model

         BusyIndicator {
             id: busyIndicator
             running: !jsonModel1.jsonready
             size: BusyIndicatorSize.Large
             anchors.horizontalCenter: parent.horizontalCenter
             anchors.verticalCenter: parent.verticalCenter
         }

         header: PageHeader {
             id: pHeader
             title: showname
         }

         delegate: BackgroundItem {
             id: myListItem
             width: ListView.view.width
             height: (showImg.height * showImg.scale) + showRect.height + Theme.paddingLarge
             OpacityRampEffect {
                 sourceItem: showRect
                 direction: OpacityRamp.TopToBottom
                 offset: 0.0
                 slope: 1.0
             }

             Rectangle {
                  id: showRect
                  anchors.left: parent.left
                  anchors.right: parent.right
                  width: parent.width
                  height: firstName.height + Theme.paddingLarge
                  color: Theme.rgba(Theme.highlightBackgroundColor, Theme.highlightBackgroundOpacity)
             }

             Image {
                id: nextIcon
                anchors.verticalCenter: showRect.verticalCenter
                anchors.right: showRect.right
                anchors.rightMargin: Theme.paddingMedium
                source: "image://theme/icon-m-right"
             }

             Image {
                id: seenIcon
                visible: false
                anchors.right: parent.right
                anchors.bottom: showImg.bottom
                anchors.rightMargin: Theme.paddingMedium
                source: "image://theme/icon-m-acknowledge"
             }


             Image {
                 id: showImg
                 property int errorCount: 0
                 anchors.top: showRect.bottom
                 anchors.margins: Theme.paddingLarge
               /*  anchors.topMargin: Theme.paddingLarge
                 anchors.bottomMargin: Theme.paddingLarge
                 anchors.rightMargin: Theme.paddingMedium
                 anchors.leftMargin: Theme.paddingMedium */
                 anchors.left: parent.left
                 scale: 1.2
                 //height: parent.height
                 // width: parent.width * 0.4
                 fillMode: Image.PreserveAspectFit
                 source: model.image ? model.image.medium ? model.image.medium : showimage : showimage
             }

             Text {
                  id: firstName
                  text: "Season: "+model.number //!== null ? "<b>"+model.name+"</b>" : ""
                  color: highlighted ? Theme.highlightColor : Theme.primaryColor
                  anchors.left: parent.left
                  anchors.right: parent.right
                  anchors.verticalCenter: showRect.verticalCenter
                  wrapMode: Text.ElideRight
                  anchors.leftMargin: Theme.paddingLarge
                  font.pixelSize: Theme.fontSizeLarge
              }
             Text {
                  id: showType
                  text: "<u>Premiere</u><br><b>" + model.premiereDate + "</b>"
                  color: highlighted ? Theme.highlightColor : Theme.primaryColor
                  wrapMode: Text.WordWrap
                  anchors.bottomMargin: Theme.paddingMedium
                  anchors.bottom: showImg.bottom
                  anchors.left: showImg.right
                  anchors.right: parent.right
                  anchors.leftMargin: Theme.paddingLarge
                  font.pixelSize: Theme.fontSizeSmall
              }

             onPressAndHold: {
                 pageStack.push(Qt.resolvedUrl("ShowImg.qml"),{"img": model.image ? model.image.medium ? model.image.medium : showimage : showimage})

                 //window.pageStack.push(Qt.resolvedUrl("SeasonsPage.qml"),{"showid": model.id,"showname": showname,"showimage": showImg.source} )
             }

             onClicked: {
                 onClicked: pageStack.push(Qt.resolvedUrl("SeasonNrPage.qml"),{"showid": showid,"showname": showname,"showimage": showImg,"number": model.number} )
             }
         }

         PullDownMenu {
             MenuItem {
                 text: qsTr("Show cast")
                 onClicked: pageStack.replace(Qt.resolvedUrl("CastPage.qml"),{"showid": showid,"showname": showname,"showimage": showimage},PageStackAction.Immediate )
             }
         }

         ViewPlaceholder {
             enabled: listView.count == 0 && jsonModel1.jsonready
             text: "No TVmaze data"
             hintText: "no information about seasons"
         }
    }

    Component {
        id: sectionDelegate
        Text {
            id: sectionLabel
            anchors.horizontalCenter: parent.horizontalCenter
            font.pixelSize: Theme.fontSizeExtraLarge
            color: Theme.highlightColor
            text: "SEASON: "+section
        }
    }
}