pragma ComponentBehavior: Bound

import QtQuick
import Weave.Controls
import Weave.Templates as T

T.AvatarBundle {
    id: root

    implicitWidth: Math.max(implicitContentWidth + leftPadding + rightPadding,
                            implicitBackgroundWidth + leftInset + rightInset)
    implicitHeight: Math.max(implicitContentHeight + topPadding + bottomPadding,
                             implicitBackgroundHeight + topInset + bottomInset)

    opacity: root.enabled ? 1.0 : Theme.component.avatar.opacity.disabled
    layer.enabled: !enabled

    hoverEnabled: root.enabled

    surfaceLevel: T.Surface.level

    contentItem: Item {
        id: content
        implicitWidth: row.width + overlap
        implicitHeight: row.height

        // TODO: AvatarBundle spacing theme constants. There is a rough pattern to the sizes in the
        // design which these calcuations attempt to emulate but there is some variability which is
        // not captured.
        property real spacing: root.overlapStyle === T.AvatarBundle.SuperCondensed ? Math.ceil(avatarWidth / 3)
                             : root.overlapStyle === T.AvatarBundle.Condensed ? 2 * Math.ceil(avatarWidth / 3)
                             : avatarWidth - root._sizeAttributes.borderWidth * 2
        property real overlap: root._sizeAttributes.borderWidth*2 + avatarWidth - content.spacing
        property real avatarWidth: root.size === Avatar.ExtraSmall ? Theme.component.avatar.xs.width
                                 : root.size === Avatar.Small ? Theme.component.avatar.s.width
                                 : root.size === Avatar.Medium ? Theme.component.avatar.m.width
                                 : root.size === Avatar.Large ? Theme.component.avatar.l.width
                                 : Theme.component.avatar.xl.width
        property color outlineColor: root.pressed ? Theme.component.avatar.boxShadowColor.pressed
                                   : (content.enabled && root.hovered) ? Theme.component.avatar.boxShadowColor.hover
                                   : root.activeFocus ? Theme.component.avatar.boxShadowColor.focus
                                   : solidColor
        property color solidColor: Theme.component.avatarbundle[surfaceColor].borderColor
        property string surfaceColor: "surface" + (root.surfaceLevel <= 100 ? "100"
                                                 : root.surfaceLevel <= 200 ? "200"
                                                 : root.surfaceLevel <= 250 ? "250"
                                                 : root.surfaceLevel <= 300 ? "300"
                                                 : root.surfaceLevel <= 350 ? "350"
                                                 : "100")

        property string elidedCount: Number(root.elidedCount).toLocaleString()

        Row {
            id: row
            Repeater {
                id: repeater
                model: root.filterModel
                delegate: Item {
                    // the item's width is less than its drawn width,
                    // allowing repeater to overdraw with subsequent delegates.
                    id: delegate
                    implicitWidth: content.spacing
                    implicitHeight: outlineRect.height
                    required property bool isElideSummary
                    required property string name
                    required property url source
                    required property string initials
                    required property variant placeholderColor

                    Rectangle {
                        id: solidBgRect
                        width: outlineRect.width
                        height: outlineRect.height
                        radius: outlineRect.radius
                        color: content.solidColor

                        Rectangle {
                            id: outlineRect
                            width: content.avatarWidth + root._sizeAttributes.borderWidth*2
                            height: width
                            radius: width/2
                            color: content.outlineColor
                        }
                        Avatar {
                            id: avatar
                            anchors.centerIn: outlineRect
                            name: delegate.name
                            source: delegate.isElideSummary ? "" : delegate.source
                            placeholderColor: delegate.isElideSummary ? Theme.component.avatarbundle.truncate.backgroundColor
                                            : !!delegate.placeholderColor ? delegate.placeholderColor
                                            : determinePlaceholderColor(name)
                            initialsColor: delegate.isElideSummary ?
                                              ((root.size === Avatar.ExtraSmall) ||
                                               ((root.size === Avatar.Small || root.size === Avatar.Medium) && content.elidedCount.length > 1) ||
                                               ((root.size === Avatar.Large || root.size === Avatar.ExtraLarge) && content.elidedCount.length > 2))
                                                   ? Theme.component.avatarbundle.truncate.textColor
                                                   : Theme.component.textlink.secondary.textColor // TODO: AvatarBundle-specific theme token
                                         : Theme.component.avatar.textColor
                            initials: delegate.isElideSummary ?
                                              ((root.size === Avatar.ExtraSmall) ||
                                               ((root.size === Avatar.Small || root.size === Avatar.Medium) && content.elidedCount.length > 1) ||
                                               ((root.size === Avatar.Large || root.size === Avatar.ExtraLarge) && content.elidedCount.length > 2))
                                                   ? "\u22EF" : ("+"+content.elidedCount)
                                    : delegate.initials.length ? delegate.initials
                                    : determineInitials(name)
                            size: root.size
                            surfaceLevel: delegate.isElideSummary ? (Theme.name.includes("dark") ? 300 : 100)
                                        : root.surfaceLevel
                        }
                    }
                }
            }
        }
    }

    background: Item { }
}