import QtQuick 2.0
import Sailfish.Silica 1.0

Item{
    id: root
    height: columnA.height
    transformOrigin: Item.Bottom
    state: "current"

    property var stack;
    property int invertedIndex: memory.count - index

    Column {
        id: columnA

        width: parent.width

        anchors{
            top: parent.top
            left: parent.left
        }

        spacing: 10

        BackgroundItem {
            id: bg

            width: parent.width
            height: Theme.fontSizeExtraLarge
            //highlighted: true

            onClicked: {
                console.log("lol");
            }

            Label {
                id: idLabel

                anchors.left: parent.left
                anchors.verticalCenter: parent.verticalCenter

                height: Theme.fontSizeExtraLarge + 10

                horizontalAlignment: Text.AlignLeft
                verticalAlignment: Text.AlignVCenter
                font.family: Theme.fontFamily
                font.pixelSize: Theme.fontSizeExtraLarge

                text: String(invertedIndex) + ":"
            }

            Flickable {
                id: flickable

                height: Theme.fontSizeExtraLarge
                width: bg.width - idLabel.width - (dropBtn.visible ? dropBtn.width : 0)

                anchors.right: dropBtn.visible ? dropBtn.left : parent.right
                anchors.verticalCenter: parent.verticalCenter

                contentHeight: height
                contentWidth: valueLabel.paintedWidth

                clip: true

                HorizontalScrollDecorator{
                    height: Math.round(Theme.paddingSmall/4)

                    opacity: 0.5    // always visible
                }

                Label {
                    id: valueLabel

                    //anchors.fill: parent
                    anchors.right: parent.right
                    anchors.verticalCenter: parent.verticalCenter

                    height: Theme.fontSizeExtraLarge + 10
                    width: bg.width - idLabel.width - (dropBtn.visible ? dropBtn.width : 0)

                    horizontalAlignment: Text.AlignRight
                    verticalAlignment: Text.AlignVCenter
                    font.family: Theme.fontFamily
                    font.pixelSize: Theme.fontSizeExtraLarge

                    text: value
                }
            }

            IconButton{
                id: dropBtn

                anchors.verticalCenter: parent.verticalCenter
                anchors.right: parent.right
                width: height
                height: Theme.fontSizeExtraLarge + 10

                visible: invertedIndex == 1 ? true : false

                icon.source: "image://Theme/icon-l-backspace"

                onClicked: {
                    stackDropFirst();
                    /*
                    if(settings.vibration()){
                        vibration.start();
                    }
                    */
                }
                onPressAndHold: {
                    stackDropAll();
                    /*
                    if(settings.vibration()){
                        longVibration.start();
                    }
                    */
                }
            }
        }

    }
}