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

T.Badge {
    id: root

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

    leftPadding: root.text.length !== 0 ? Theme.component.badge.text.paddingLeft
               : (root.icon.name.length !== 0 || root.icon.source.toString().length !== 0)
                    ? (size === Badge.Small ? Theme.component.badge.s.iconContainer.paddingLeft
                                            : Theme.component.badge.l.iconContainer.paddingLeft)
                    : 0 // dot has no padding.
    rightPadding: root.text.length !== 0 ? Theme.component.badge.text.paddingRight
                : (root.icon.name.length !== 0 || root.icon.source.toString().length !== 0)
                    ? (size === Badge.Small ? Theme.component.badge.s.iconContainer.paddingRight
                                            : Theme.component.badge.l.iconContainer.paddingRight)
                    : 0 // dot has no padding.

    font.family: Theme.component.badge.fontFamily
    font.pixelSize: Theme.component.badge.fontSize
    font.weight: Theme.component.badge.fontWeight

    icon.width:  size === Badge.Small ? Theme.component.badge.s.icon.width
                                      : Theme.component.badge.l.icon.width
    icon.height: size === Badge.Small ? Theme.component.badge.s.icon.width
                                      : Theme.component.badge.l.icon.width

    // TODO: Theme.component.badge.outlined.borderColor is not surface-level aware?
    outlineColor: (T.Surface.level >= 350) ? Theme.component.surface._350.backgroundColor
                : (T.Surface.level >= 300) ? Theme.component.surface._300.backgroundColor
                : (T.Surface.level >= 250) ? Theme.component.surface._250.backgroundColor
                : (T.Surface.level >= 200) ? Theme.component.surface._200.backgroundColor
                : Theme.component.surface._100.backgroundColor

    outlineWidth: Theme.component.badge.outlined.borderWidth

    hoverEnabled: root.enabled

    opacity: root.visible ? 1.0 : 0.0
    Behavior on opacity {
        OpacityAnimator {
            duration: Theme.component.badge.transitionDuration
            easing.type: Theme.component.badge.transitionTimingFunction
        }
    }

    contentItem: Item {
        implicitHeight: root.text.length !== 0
                          ? label.implicitHeight
                      : (root.icon.name.length !== 0 || root.icon.source.toString().length !== 0)
                          ? img.implicitHeight
                      : /* no text or icon, just dot */
                            root.size === Badge.Small
                                ? Theme.component.badge.dot.s.height
                                : Theme.component.badge.dot.l.height
        implicitWidth: root.text.length !== 0 ? label.implicitWidth : implicitHeight

        Text {
            id: label
            anchors.centerIn: parent
            visible: root.text.length !== 0
            verticalAlignment: Text.AlignVCenter
            lineHeight: Theme.component.badge.lineHeight
            lineHeightMode: Text.FixedHeight
            font: root.font
            text: root.text
            color: root.textColor
        }

        T.IconImage {
            id: img
            anchors.centerIn: parent
            visible: status == Image.Ready
            name: root.icon.name
            url: root.icon.source
            color: root.iconColor
            sourceSize: Qt.size(root.icon.width, root.icon.height)
        }
    }

    background: Rectangle {
        id: backgroundItem
        implicitHeight: root.text.length !== 0 ? Theme.component.badge.text.height + Theme.component.badge.text.paddingTop + Theme.component.badge.text.paddingBottom
                      : (root.icon.source.toString().length !== 0 || root.icon.name.length !== 0)
                            ? (root.size === Badge.Small ? Theme.component.badge.s.iconContainer.height
                                                         : Theme.component.badge.l.iconContainer.height)
                      : (root.size === Badge.Small ? Theme.component.badge.dot.s.height
                                                   : Theme.component.badge.dot.l.height)
        implicitWidth: root.text.length !== 0 ? 1 : implicitHeight
        radius: height/2 // TODO: Theme.generic.borderRadius.pill but this token value 1000em which is CSS-specific
        color: root.backgroundColor

        Rectangle {
            id: outline
            anchors {
                fill: parent
                margins: -root.outlineWidth
            }
            visible: root.outlineVisible
            border.width: root.outlineWidth
            border.color: root.outlineColor
            color: "transparent"
            radius: backgroundItem.radius + root.outlineWidth
            z: -1
        }
    }
}