import QtQuick 2.0
import Sailfish.Silica 1.0
import QtQuick.LocalStorage 2.0
import "../helpers/db.js" as Favorites

Page {
    property int maxTags: 0

    property int fontMin: Theme.fontSizeExtraSmall
    property int fontMax: Theme.fontSizeHuge

    property ListModel playedTags: ListModel {id: playedTags}

    function getCrSize(size) { /// Calculate and return a more nice looking fontsize based on number of stations.
        //console.log("FUNCTION: "+size)
        var fs = size === 100 ? fontMin : (size / maxTags) * (fontMax - fontMin) + fontMin;
        return fs
    }

    onMaxTagsChanged: console.log("MAXTAGS: "+maxTags)

    SilicaFlickable {
        id: flick
        anchors.fill: parent
        anchors.bottomMargin: mediaPlayerPanel.visibleSize
        contentWidth: parent.width;
        contentHeight: flow.childrenRect.height + header.height + (Theme.paddingLarge * 2)

        clip: true
      //  header: PageHeader{title: "Play history";description: "Radio stations: "+view.count}

        ScrollDecorator {flickable:flick}

        Column {
            id: header
            width: parent.width

            PageHeader {
                title: qsTr("Played tags")
                description: qsTr("Found ")+playedTags.count
            }
        }

        Flow {
            id: flow
            anchors.top: header.bottom
            anchors.left: parent.left
            anchors.right: parent.right
            anchors.bottom: parent.bottom
            anchors.margins: Theme.paddingMedium
            clip: true
            spacing: Theme.paddingLarge

            Repeater {
                id: elements
                model: playedTags

                //onItemAdded: "ITEM ADDED: "+model.tag

                Text {
                    id: tagtext
                    text: tag
                    font.pixelSize:  getCrSize(myclickcount) //((stationcount / 3000) * 100) * (Theme.fontSizeExtraLarge - Theme.fontSizeSmall) + Theme.fontSizeSmall
                    //font.bold: if (font.pixelSize >= Theme.fontSizeLarge) true; else false

                    color: {
                        if (font.pixelSize <= Theme.fontSizeMedium) Theme.secondaryColor;
                        else if (font.pixelSize > Theme.fontSizeMedium) Theme.primaryColor

                    }

                    MouseArea {
                        id: m
                        anchors.fill: parent
                        onPressedChanged: pressed ? tagtext.color = Theme.highlightColor : tagtext.color = Theme.primaryColor
                        onClicked: pageStack.push("CountryStationsPage.qml",{filterby: "tag",searchby: "name",stext: tag,comboIndex: 1 })//pageStack.push("CrTagStationsPage.qml",{filter: tag}) //pageStack.push("TagStationsPage.qml",{filter: tag,running: true})// //{Qt.inputMethod.hide();flick.focus=true ;pageStack.push("TagStationsPage.qml",{filter: tag,running: true})}
                    }
                }
            }
        }
    }
    Component.onCompleted: {Favorites.getTagsClicked(playedTags,100000)}
}
