/*
 * File taken from Storeman. See ../3rdparty.xml for licensing information
 */

import QtQuick 2.0
import Sailfish.Silica 1.0

Item {
    id: root
    property alias text: label.text
    property alias textAlignment: label.horizontalAlignment
    property bool busy: false
    property bool clickable: true
    property int depth: 0
    readonly property color _color: {
        if (!clickable) {
            Theme.primaryColor
        } else if (enabled) {
                if (highlighted) {
                    Theme.highlightColor
                } else {
                    Theme.primaryColor
                }
        } else {
            Theme.secondaryColor
        }
    }
    default property alias content: container.data

    signal headerClicked()

    implicitHeight: backgroundItem.height + container.height
    width: parent.width

    BackgroundItem {
        id: backgroundItem
        enabled: parent.enabled && parent.clickable
        width: parent.width
        height: Theme.itemSizeMedium
        onClicked: root.headerClicked()

        Rectangle {
            anchors.fill: parent
            gradient: Gradient {
                GradientStop { position: 0.0; color: Theme.rgba(Theme.highlightBackgroundColor, 0.15) }
                GradientStop { position: 1.0; color: "transparent" }
            }
        }

        Label {
            id: label
            anchors {
                left: parent.left
                right: image.left
                verticalCenter: parent.verticalCenter
                leftMargin: Theme.horizontalPageMargin + depth * Theme.paddingLarge
                rightMargin: Theme.paddingMedium
            }
            horizontalAlignment: Text.AlignRight
            truncationMode: TruncationMode.Fade
            color: _color
        }

        Image {
            id: image
            anchors {
                right: parent.right
                verticalCenter: parent.verticalCenter
                rightMargin: Theme.horizontalPageMargin
            }
            visible: root.enabled  && root.clickable && !root.busy
            source: "image://theme/icon-m-right?" + _color
        }

        BusyIndicator {
            id: busyIndicator
            running: root.busy
            anchors.centerIn: image
            size: BusyIndicatorSize.Small
        }
    }

    Item {
        id: container
        anchors {
            top: backgroundItem.bottom
            left: parent.left
            right: parent.right
        }
        width: parent.width
        height: children.length > 0 ? children[0].height : 0
    }
}