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: ""
    property string number: ""

    SilicaListView {
        id: listView
        anchors.fill: parent

        clip: true

        JSONListModel {
            id: jsonModel1
            source: "http://api.tvmaze.com/shows/"+showid+"/episodes"
            query: "$[?(@.season==="+number+")]"
        }

        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
            description: "Season: "+number
        }

        delegate: BackgroundItem {
            id: myListItem

            enabled: model.summary !== ""
            width: ListView.view.width
            height: showImg.height + showRect.height + showAirdate.height + showSummary.height + showSummaryIcon.height + Theme.paddingLarge//showImg.height > 20 ? showImg.height + showSummary.height + showAirdate.heigth + showRect.height + showSummaryIcon.height + (Theme.paddingLarge * 3)  : firstName.height + showAirdate.height + showAirdate.heigth + showRuntime.height + showSummary.height + showRect.height + (Theme.paddingLarge * 3)

            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: seenIcon
               visible: false
               anchors.right: parent.right
               anchors.top: showImg.top
               anchors.topMargin: Theme.paddingLarge
               anchors.rightMargin: Theme.paddingMedium
               source: "image://theme/icon-m-acknowledge"
            }

            Image {
                id: showImg
                property int errorCount: 0
                anchors.top: showAirdate.bottom
                //anchors.margins: Theme.paddingLarge
                anchors.topMargin: Theme.paddingSmall
          /*      anchors.topMargin: Theme.paddingLarge
                anchors.bottomMargin: Theme.paddingMedium
                anchors.rightMargin: Theme.paddingMedium
                anchors.leftMargin: Theme.paddingMedium */
                anchors.left: parent.left
               // width: parent.width * 0.4
               // x: 0
               // y: 0
               // width: parent.width * 0.4
               // height: parent.width * 0.3
                height: width * 0.6
                width: page.width
                //scale: 1.1
               // height: parent.height
                fillMode: Image.PreserveAspectFit
                source: model.image ? model.image.medium ? model.image.medium : "" : ""
            }

            Text {
                 id: firstName
                 text: model.number + ": " + model.name
                 color: highlighted ? Theme.highlightColor : Theme.primaryColor
                 anchors.left: parent.left
                 anchors.right: parent.right
                 anchors.verticalCenter: showRect.verticalCenter
                 wrapMode: Text.ElideRight
                 anchors.leftMargin: Theme.paddingMedium
                 font.pixelSize: Theme.fontSizeLarge
             }

            Text {
                 id: showSummary
                 //anchors.bottom: showSummaryIcon.top
                 anchors.top: showImg.bottom
                 anchors.topMargin: Theme.paddingLarge
                 anchors.leftMargin: Theme.paddingMedium
                 anchors.rightMargin: Theme.paddingMedium
                 anchors.bottomMargin: Theme.paddingLarge
                 anchors.left: parent.left
                 anchors.right: parent.right
                 text: ""
                 color: Theme.primaryColor
                 wrapMode: Text.WordWrap
                 width: parent.width
                 font.pixelSize: Theme.fontSizeSmall
             }

            Image {
               id: showSummaryIcon
               anchors.top: showImg.bottom
               anchors.bottomMargin: Theme.paddingLarge
               //anchors.topMargin: Theme.paddingMedium
               anchors.right:  parent.right
               anchors.rightMargin: Theme.paddingMedium
               source: model.summary !== "" ? "image://theme/icon-lock-more" : ""
            }

            Text {
                 id: showAirdate
                 text: "Air date: <b>"+model.airdate+"</b>"
                 color: highlighted ? Theme.highlightColor : Theme.primaryColor
                 wrapMode: Text.WordWrap
                 //anchors.topMargin: Theme.paddingMedium
                 anchors.top: showRect.bottom
                 anchors.left: parent.left
                 anchors.leftMargin: Theme.paddingMedium
                 //anchors.right: parent.right

                 anchors.rightMargin: Theme.paddingMedium
                 font.pixelSize: Theme.fontSizeSmall
             }
             Text {
                 id: showRuntime
                 text: model.runtime !== null ? "(Runtime: <b>" + model.runtime + " minutes)</b>" : ""
                 color: highlighted ? Theme.highlightColor : Theme.primaryColor
                 wrapMode: Text.WordWrap
                 anchors.top: showRect.bottom
                 //anchors.topMargin: Theme.paddingMedium
                 //anchors.left: showImg.right
                 anchors.right: parent.right
                 anchors.leftMargin: Theme.paddingMedium
                 anchors.rightMargin: Theme.paddingMedium
                 font.pixelSize: Theme.fontSizeSmall
             }



            onClicked: {
                showSummary.text !== "" ? showSummary.text = "" : showSummary.text = model.summary
            }
        }

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

    Component {
        id: sectionDelegate

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

    }
}