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

Menu {
    id: flyout

    leftMargin: Theme.component.flyout.arrow.width
    rightMargin: Theme.component.flyout.arrow.width
    topMargin: Theme.component.flyout.arrow.height
    bottomMargin: Theme.component.flyout.arrow.height

    horizontalAlignment: Menu.AlignHCenter

    background: FlyoutBackground {
        flyoutItem: flyout

        nubAlignment: {
            const parent = flyout.parent

            const parentWidth = parent.width
            const parentHeight = parent.height

            const flyoutWidth = flyout.width
            const flyoutHeight = flyout.height

            const left = flyout.x
            const top = flyout.y
            const right = flyout.x + flyoutWidth
            const bottom = flyout.y + flyoutHeight

            let preferred = 0

            if (bottom <= -flyoutHeight) {
                return T.Flyout.BottomCenter
            } else if (top >= parentHeight) {
                return T.Flyout.TopCenter
            } else if (right <= -flyoutWidth) {
                return T.Flyout.RightCenter
            } else if (left >= parentWidth) {
                return T.Flyout.LeftCenter
            } else {
                // There is an overlap between the flyout and its parent
                const dx = left + (flyoutWidth / 2) - (parentWidth / 2)
                const dy = top + (flyoutHeight / 2) - (parentHeight / 2)
                if (Math.abs(dx) > Math.abs(dy)) {
                    return dx >= 0 ? T.Flyout.LeftCenter : T.Flyout.RightCenter
                } else {
                    return dy >= 0 ? T.Flyout.TopCenter : T.Flyout.BottomCenter

                }
            }
        }
    }
}