import QtQuick
import QtQuick.Templates as QQCT
import Weave.Controls
import Weave.Templates as T
import "internal"

T.Button {
    id: root

    leftPadding: Theme.component.button.paddingLeft
    rightPadding: Theme.component.button.paddingRight
    topPadding: Theme.component.button.paddingTop
    bottomPadding: Theme.component.button.paddingBottom

    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
                            implicitContentWidth + leftPadding + rightPadding)
    implicitHeight: display === QQCT.Button.TextUnderIcon
            ? implicitContentHeight + topPadding + bottomPadding
            : Theme.component.button.height

    icon.color: root.checked ? Theme.component.button.outline.icon.fill
              : root._styleAttributes.icon.fill
    icon.width: Theme.component.button.icon.width
    icon.height: Theme.component.button.icon.height

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

    style: flat ? Button.Flat : Button.Outline

    opacity: enabled ? 1 : Theme.component.button.opacity.disabled
    layer.enabled: !enabled && style == Button.Solid // The Solid style has overlapping items so they need to be merged before applying opacity or they will interblend.
    hoverEnabled: enabled

    menuPosition: Qt.point(
            !menu || menu.horizontalAlignment === undefined || menu.horizontalAlignment === Menu.AlignLeft
                ? 0
                : (menu.horizontalAlignment == Menu.AlignRight ? width - menu.width : (width - menu.width) / 2),
            height + (menu ? menu.topMargin + menu.verticalPadding : 0))
    onMenuChanged: if (menu && menu.background) menu.background.implicitWidth = Qt.binding(function() { return root.width })

    contentItem: Item {

        implicitWidth: (root.display === QQCT.Button.IconOnly || root.text.length === 0)
                ? icon.width + (root.menu ? root.implicitIndicatorWidth + Theme.component.button.iconLeft.iconContainer.marginRight : 0)
                : label.implicitWidth
        implicitHeight: (root.display === QQCT.Button.IconOnly || root.text.length === 0)
                ? icon.height
                : label.implicitHeight

        Text {
            id: label

            width: parent.width
            height: parent.height

            horizontalAlignment: Text.AlignHCenter
            verticalAlignment: Text.AlignVCenter

            text: root.text
            font: root.font
            color: root._styleAttributes.textColor
            elide: Text.ElideRight
            lineHeight: Theme.component.button.lineHeight
            lineHeightMode: Text.FixedHeight

            leftPadding: ((!root.mirrored ^ (root.iconAlignment === T.Button.AlignRight))
                            && root.display == QQCT.Button.TextBesideIcon
                            && icon.status === Image.Ready
                        ? icon.width + (root.text ? Theme.component.button.iconLeft.iconContainer.marginRight : 0)
                        : 0)
                    + (root.mirrored && root.menu ? root.implicitIndicatorWidth + Theme.component.button.iconLeft.iconContainer.marginRight : 0) // TODO: Theme.component.button.caret.margin

            rightPadding: ((root.mirrored ^ (root.iconAlignment === T.Button.AlignRight))
                            && root.display == QQCT.Button.TextBesideIcon
                            && icon.status === Image.Ready
                        ? icon.width + (root.text ? Theme.component.button.iconRight.iconContainer.marginLeft : 0)
                        : 0)
                    + (!root.mirrored && root.menu ? root.implicitIndicatorWidth + Theme.component.button.iconLeft.iconContainer.marginRight : 0) // TODO: Theme.component.button.caret.margin

            topPadding: root.display == QQCT.Button.TextUnderIcon
                        && icon.status === Image.Ready
                      // For vertical case, use marginRight as padding, because there is no vertical-orientation-specific paddingBottom token.
                    ? icon.height + Theme.component.button.iconLeft.iconContainer.marginRight
                    : 0
        }

        T.IconImage {
            id: icon

            width: Theme.component.button.iconContainer.width
            height: Theme.component.button.iconContainer.height
            name: root.icon.name
            url: root.icon.source
            color: root.icon.color
            sourceSize: Qt.size(root.icon.width, root.icon.height)

            x: {
                if (root.display === QQCT.Button.TextUnderIcon
                        || root.display == QQCT.Button.IconOnly) {
                    return (parent.width - width) / 2
                } else if (root.mirrored ^ (root.iconAlignment === T.Button.AlignRight)) {
                    return label.width
                            - label.rightPadding
                            + (root.text ? Theme.component.button.iconRight.iconContainer.marginLeft : 0)
                            - ((label.width - label.implicitWidth) / 2)
                } else {
                    return label.leftPadding
                            - width
                            - (root.text ? Theme.component.button.iconLeft.iconContainer.marginRight : 0)
                            + ((label.width - label.implicitWidth) / 2)
                }
            }
            y: root.display === QQCT.Button.TextUnderIcon
                    ? parent.height - height
                    : (parent.height - height) / 2
        }
    }

    indicator: T.IconImage {
        x: root.mirrored ? root.leftPadding : root.width - root.rightPadding - width
        y: root.topPadding + ((root.availableHeight - height)  / 2)

        width: Theme.component.button.caret.icon.width
        height: Theme.component.button.caret.icon.height

        visible: root.menu

        name: root.menu && root.menu.opened
                ? Theme.icon.medium("caret-up")
                : Theme.icon.medium("caret-down")

        color: root._styleAttributes.icon.fill
    }

    background: BoxShadow {
        id: backgroundId

        implicitWidth: Theme.component.button.minWidth
        implicitHeight: Theme.component.button.height

        radius: Theme.component.button.borderRadius

        readonly property string shadowState: (root.pressed || (root.menu && root.menu.opened)) ? "pressed"
                : root.enabled && root.hovered ? "hover"
                : root.visualFocus && !root.hovered ? "focus"
                : "hover"
        offsetX: Theme.component.button.boxShadowX[shadowState]
        offsetY: Theme.component.button.boxShadowY[shadowState]
        blurRadius: Theme.component.button.boxShadowBlur[shadowState]
        spreadRadius: Theme.component.button.boxShadowSpread[shadowState]
        color: shadowState === "hover" && (!root.enabled || !root.hovered) ? "transparent" : Theme.component.button.boxShadowColor[shadowState]

        Rectangle {
            visible: root.style === T.Button.Solid
            width: backgroundId.width
            height: backgroundId.height
            radius: Theme.component.button.borderRadius
            color: Theme.component.button.solid.backgroundColor
        }

        Rectangle {
            visible: root.style !== T.Button.Flat
            width: backgroundId.width
            height: backgroundId.height
            radius: Theme.component.button.borderRadius
            color: "transparent"

            border.width: Theme.component.button.borderWidth
            border.color: root.style === T.Button.Flat ? Theme.component.button.flat.borderColor
                        : root.style === T.Button.Solid ? Theme.component.button.solid.borderColor
                        : root.pressed ? Theme.component.button.outline.borderColor.pressed
                        : root.visualFocus && !root.hovered ? Theme.component.button.outline.borderColor.focus
                        : Theme.component.button.outline.borderColor.default
        }
    }
}