import QtQuick 2.0
import Sailfish.Silica 1.0
import QtGraphicalEffects 1.0
import "../helpers/jsFunctions.js" as JS
ListItem {
        id: delegate
        property alias favIcon: favIcon
        property alias contextMenuHeight: contextMenu.height
        property bool favo: favorite ? true : false
        property variant view
   //     property bool favorite: false

        height: menuOpen ? contextMenu.height + Theme.itemSizeExtraLarge : Theme.itemSizeExtraLarge
        menu: contextMenu
        contentHeight: Theme.itemSizeExtraLarge
        showMenuOnPressAndHold: true

        ContextMenu {
            id: contextMenu
            MenuItem {
                Row {
                    anchors.centerIn: parent
                    spacing: Theme.paddingMedium
                    Image {
                        source: "image://theme/icon-m-like"
                        anchors.verticalCenter: parent.verticalCenter
                        height: Theme.itemSizeExtraSmall * 0.5
                        width: height
                        fillMode: Image.PreserveAspectFit
                    }
                    Label {
                        font.pixelSize: Theme.fontSizeSmall
                        text: qsTr("Vote on Community Radio Browser")
                    }
                }
                onClicked: console.log("LIKE!!!") //remove()//listView.currentItem.remove(rpindex,rpsource) //listView.remorseAction();
            }
            MenuItem {
                Row {
                    anchors.centerIn: parent
                    spacing: Theme.paddingMedium
                    Image {
                        source: favo ? "image://theme/icon-m-favorite-selected" : "image://theme/icon-m-favorite"
                        anchors.verticalCenter: parent.verticalCenter
                        height: Theme.itemSizeExtraSmall * 0.5
                        width: height
                        fillMode: Image.PreserveAspectFit
                    }
                    Label {
                        font.pixelSize: Theme.fontSizeSmall
                        text: favo ? qsTr("Remove from favorites") : qsTr("Add to favorites")
                    }
                }
                onClicked: {
                    favo ? favo = false : favo = true
                    //radioPlayer._favorite = favo
                    radioPlayer.setStationFavorite(stationuuid,name,countrycode,homepage,url_resolved,favicon,tags,codec,bitrate,hls,favo)
                }
            }
     /*       MenuItem {
                Row {
                    anchors.centerIn: parent
                    spacing: Theme.paddingMedium
                    Image {
                        source: "image://theme/icon-m-delete"
                        anchors.verticalCenter: parent.verticalCenter
                        height: Theme.itemSizeExtraSmall * 0.5
                        width: height
                        fillMode: Image.PreserveAspectFit
                    }
                    Label {
                        font.pixelSize: Theme.fontSizeSmall
                        text: qsTr("Remove from AllRadio2")
                    }
                }
                onClicked: remove()//console.log("DELETE!!!") //remove()//listView.currentItem.remove(rpindex,rpsource) //listView.remorseAction();
            } */
        }


/*        Rectangle {
            id: stationLogo
            anchors.top: header.bottom
            anchors.horizontalCenter: parent.horizontalCenter
            width: parent.width - (Theme.paddingLarge * 2)
            height: width
            radius: 20
            color: "transparent" //Theme.rgba(Theme.highlightDimmerColor,0.8)
            border.color: Theme.rgba(Theme.highlightDimmerColor,0.8)
            border.width: Theme.paddingSmall
        } */

        Rectangle {
            id: favIcon
            property alias source: stationimage.source
            anchors.left: parent.left
            anchors.leftMargin: Theme.paddingMedium
            anchors.verticalCenter: parent.verticalCenter
            height: Theme.itemSizeLarge//nameLabel.height + codecLabel.height + tagLabel.height
            width: height
            radius: 20

            color: "transparent" //Theme.rgba(Theme.highlightDimmerColor,0.8)
            border.color: Theme.rgba(Theme.highlightDimmerColor,0.8)
            border.width: Theme.paddingSmall
        }

        Image {
                id: stationimage
                anchors.fill: favIcon
                anchors.margins: favIcon.border.width
                fillMode: Image.PreserveAspectFit
                source: favicon ? favicon : "../images/community.png"
     //          layer.enabled: true
      //          layer.effect: OpacityMask {
      //              maskSource: parent
      //          }
       //         layer {
       //             enabled: false
      //             effect: ColorOverlay {
       //                 color: Theme.highlightBackgroundColor
       //             }
       //         }

                BusyIndicator {
                    size: BusyIndicatorSize.Medium
                    anchors.centerIn: stationimage
                    //running: appActive && stationimage.status != Image.Ready

                }

                onStatusChanged:
                    switch(stationimage.status){
                    case Image.Null:
                        //console.log("no image has been set: "+ name);
                        source = "../images/community.png"
                        break;
                    case Image.Ready:
                        //console.log("the image has been loaded: "+name+"\n"
                        //        + stationimage.width + " x " + stationimage.height);
                        break;
                    case Image.Loading:

                        break;
                    case Image.Error:
                        //console.log("an error occurred while loading the image: "+name);
                        source = "../images/community.png"
                        break;
                    }



            }
      /*      Image {
                height: stationimage.height * 0.50
                fillMode: Image.PreserveAspectFit
                opacity: 0.9
                anchors.right: favIcon.right
                anchors.bottom: favIcon.bottom
                source: "../flags/"+countrycode.toLowerCase()+".png"
            } */
      //  }

        Label {
            id: nameLabel
            anchors.bottom: countryLabel.top
           // anchors.bottomMargin: Theme.paddingSmall
            anchors.left: favIcon.right
            anchors.right: fav.left
            anchors.leftMargin: Theme.paddingLarge
            anchors.rightMargin: Theme.paddingMedium
            elide: Text.ElideRight
            width: parent.width - (favIcon.width + (Theme.paddingLarge * 2))
            text: lastcheckok == "1" ? name : " ["+qsTr("DOWN")+"] "+name
            color: lastcheckok == "1" ? Theme.primaryColor : Theme.secondaryColor
            font.strikeout: lastcheckok == "1" ? false : true
            font.pixelSize: Theme.fontSizeSmall
        }
        Image {
            id:countryImage
            height: countryLabel.height * 0.8

            anchors.leftMargin: Theme.paddingLarge
            fillMode: Image.PreserveAspectFit
            opacity: 0.7
            anchors.left: favIcon.right
            anchors.bottom: countryLabel.bottom
            source: "../flags/"+countrycode.toLowerCase()+".png"
        }
        Label {
            id: countryLabel
            anchors.verticalCenter: parent.verticalCenter
            anchors.left: countryImage.right
            anchors.leftMargin: Theme.paddingMedium
            font.pixelSize: Theme.fontSizeExtraSmall
            text:  radioBrowser.getCountryName(countrycode)//"Country name"//getAll(hls,codec,bitrate)
            color: delegate.highlighted ? Theme.highlightColor : Theme.secondaryColor
        }
        Label {
            id: codecLabel
            anchors.verticalCenter: parent.verticalCenter
            anchors.right: parent.right
            anchors.leftMargin: Theme.paddingLarge
            font.pixelSize: Theme.fontSizeExtraSmall
            text: JS.getAll(hls,codec,bitrate)
            color: delegate.highlighted ? Theme.highlightColor : Theme.secondaryColor
        }
        Label {
            id: tagLabel
            anchors.top: countryLabel.bottom
            //anchors.topMargin: Theme.paddingSmall
            anchors.left: favIcon.right
            anchors.leftMargin: Theme.paddingLarge
            font.pixelSize: Theme.fontSizeExtraSmall
            width: parent.width - (favIcon.width + (Theme.paddingLarge * 2))
            elide: Text.ElideRight

            text: tags
            color: delegate.highlighted ? Theme.highlightColor : Theme.secondaryColor
        }
        Image {
            id: fav
            height: nameLabel.height * 0.8
            width: height
            fillMode: Image.PreserveAspectFit
            opacity: 0.8
            visible: favo
            anchors.right: parent.right
            anchors.verticalCenter: nameLabel.verticalCenter
            //anchors.top: nameLabel.top
            anchors.rightMargin: Theme.paddingMedium
            source: "image://theme/icon-m-favorite-selected" //favo ? "image://theme/icon-m-favorite-selected" : "image://theme/icon-m-favorite"
        }

        //onFavoChanged: if (favo) setRadioData()

        onClicked: {
            if (model.url_resolved !== radioPlayer._url_resolved) {
                radioPlayer._favicon = model.favicon
                radioPlayer._name = model.name
                radioPlayer._countrycode = model.countrycode
                radioPlayer._tags = model.tags
                radioPlayer._codec = model.codec//getCodec(model.codec)
                radioPlayer._bitrate = model.bitrate //getBitrate(model.bitrate)
                radioPlayer._hls = model.hls
                radioPlayer._url_resolved = model.url_resolved
                radioPlayer._homepage = model.homepage
                radioPlayer._stationuuid = model.stationuuid
                radioPlayer._favorite = favo
                radioPlayer.clicked = false
            } else radioPlayer.clicked = true
        }
    }
