pragma ComponentBehavior: Bound

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

T.MenuItem {
    id: root

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

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

    spacing: Theme.component.menuitem.icon.marginRight

    font.family: Theme.component.menuitem.fontFamily
    font.pixelSize: Theme.component.menuitem.fontSize
    font.weight: checked
            ? Theme.component.menuitem.fontWeight.selected
            : Theme.component.menuitem.fontWeight.default

    icon.color: Theme.component.menuitem.icon.fill
    icon.width: Theme.component.menuitem.icon.width
    icon.height: Theme.component.menuitem.icon.height

    opacity: enabled ? 1.0 : Theme.component.menuitem.opacity.disabled

    hoverEnabled: root.enabled

    // nomenclature of controls differs from Weave; arrow is Weave indicator
    arrow: Row {
        id: arrowItem

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

        spacing: root.spacing

        Text {
            y: (arrowItem.height - height) / 2

            color: Theme.component.menuitem.shortcut.textColor

            font.family: Theme.component.menuitem.fontFamily
            font.pixelSize: Theme.component.menuitem.shortcut.fontSize
            font.weight: Theme.component.menuitem.shortcut.fontWeight

            lineHeight: Theme.component.menuitem.shortcut.lineHeight
            lineHeightMode: Text.FixedHeight

            text: root.shortcutText
        }

        T.IconImage {
            y: (arrowItem.height - height) / 2

            color: Theme.component.menuitem.caret.icon.fill
            name: Theme.icon.medium("caret-right")
            visible: !!root.subMenu
            mirror: root.mirrored
        }
    }

    // nomenclature of controls differs from Weave; indicator is Weave checkmark
    indicator: T.IconImage {
        x: root.mirrored
                ? root.width - width - Theme.component.menuitem.checkmark.icon.marginRight - root.rightPadding
                : root.leftPadding + Theme.component.menuitem.checkmark.icon.marginLeft
        y: root.topPadding + Theme.component.menuitem.checkmark.icon.marginTop + (root.availableHeight - height) / 2

        visible:  root.checkable
        color: root.checked ? Theme.component.menuitem.checkmark.icon.fill.selected
             : (root.enabled && root.hovered) ? Theme.component.menuitem.checkmark.icon.fill.default
             : "transparent"
        opacity: (root.enabled && !root.checked && root.hovered) ? Theme.generic.opacity._40 : 1.0 // TODO Theme.component.menu.checkmark.opacity
        name: Theme.icon.small("checkmark")
    }

    contentItem: Item {
        id: content

        implicitWidth: (root.display === QQCT.MenuItem.IconOnly
                        ? imageLoader.implicitWidth
                        : label.implicitWidth)
                     + root.arrow.width
                     + 2*root.spacing
        implicitHeight: root.display === QQCT.MenuItem.IconOnly
                    || imageLoader.implicitHeight > label.implicitHeight
                ? imageLoader.implicitHeight
                : label.implicitHeight

        Text {
            id: label

            width: content.width
            height: content.height

            horizontalAlignment: root.display ===  T.ItemDelegate.TextUnderIcon
                    ? Text.AlignHCenter
                    : Text.AlignLeft
            verticalAlignment: Text.AlignVCenter

            text: root.display === QQCT.MenuItem.IconOnly ? "" : root.text
            font: root.font
            color: Theme.component.menuitem.textColor
            maximumLineCount: root.maximumLineCount
            elide: Text.ElideRight
            wrapMode: Text.Wrap

            lineHeight: Theme.component.menuitem.lineHeight
            lineHeightMode: Text.FixedHeight

            leftPadding: (!root.mirrored
                            && root.sectionImageWidth > 0
                            && root.display !== QQCT.MenuItem.TextUnderIcon
                        ? root.sectionImageWidth + root.spacing
                        : 0)
                    + (!root.mirrored && root.checkable
                        ? root.implicitIndicatorWidth + root.spacing
                        : 0)
                    + (root.mirrored && (root.subMenu || root.shortcutText) && root.arrow
                        ? root.arrow.width + root.spacing
                        : 0)

            rightPadding: (root.mirrored
                            && root.sectionImageWidth > 0
                            && root.display !== QQCT.MenuItem.TextUnderIcon
                        ? root.sectionImageWidth + root.spacing
                        : 0)
                    + (root.mirrored && root.checkable
                        ? root.implicitIndicatorWidth + root.spacing
                        : 0)
                    + (!root.mirrored && (root.subMenu || root.shortcutText) && root.arrow
                        ? root.arrow.width + root.spacing
                        : 0)

            topPadding: root.display === QQCT.MenuItem.TextUnderIcon
                    ? root.icon.height + root.spacing
                    : 0
        }

        Loader {
            id: imageLoader
            x: {
                if (root.display === QQCT.MenuItem.TextUnderIcon
                        || root.display === QQCT.MenuItem.IconOnly) {
                    return (content.width - width) / 2
                } else if (root.mirrored) {
                    return label.width - label.rightPadding + root.spacing
                } else {
                    return label.leftPadding - width - root.spacing
                }
            }
            y: root.display === QQCT.MenuItem.TextUnderIcon
                    ? content.height - height
                    : (content.height - height) / 2
            sourceComponent: !!root.image ? root.image : iconComponent

            Component {
                id: iconComponent
                T.IconImage {
                    width: status == Image.Ready ? Theme.component.button.iconContainer.width : 0 // TODO: menu-specific Theme token.
                    height: status == Image.Ready ? Theme.component.button.iconContainer.height : 0 // TODO: menu-specific Theme token.
                    name: root.icon.name
                    url: root.icon.source
                    color: root.icon.color
                    sourceSize: Qt.size(root.icon.width, root.icon.height)
                }
            }

            Component.onCompleted: root.imageWidth = imageLoader.width
            onWidthChanged: root.imageWidth = imageLoader.width
        }
    }

    background: Rectangle {
        implicitWidth: Theme.component.menuitem.minWidth
        color: {
            if (root.pressed) {
                return Theme.component.menuitem.backgroundColor.pressed
            } else if (root.enabled && root.hovered) {
                return Theme.component.menuitem.backgroundColor.hover
            } else {
                return Theme.component.menuitem.backgroundColor.default
            }
        }
    }
}