import { getAcceleratorLabelTokens, MenuItem } from "./MenuItem"
import { animateWithClass } from "./animateWithClass"

// Close if mouse is held down longer than this (ms).
const closeOnReleaseThreshold = 500

// Add this many pixels of safe area around menus.
const safeMargin = 5

export enum CloseBehavior {
    /** Immediately fade out. */
    Immediate,
    /** Fade out after a small delay. */
    Delayed,
    /** Disappear instantly. */
    NoAnimation,
}

export interface MenuInstanceOptions {
    document?: Document
    className?: string
    isDarkMode?: boolean
    maxItemsPerMenu?: number
    enableTranslate?: boolean
    /**
     * Callback to be notified about the user's selection.
     *
     * This callback is guaranteed to be [triggered by user activation][1], so
     * use it for any code that requires it.
     *
     * [1]: https://html.spec.whatwg.org/multipage/interaction.html#triggered-by-user-activation
     */
    onSelection?: (selection: Selection) => void
}

export interface PositionOptions {
    location: { x: number; y: number }
    within?: Area
    expandRight?: boolean
}

export interface Selection {
    path: number[]
    action?: string
    altKey: boolean
    ctrlKey: boolean
    metaKey: boolean
    shiftKey: boolean
}

interface Area {
    bottom: number
    left: number
    right: number
    top: number
}

const enum Flow {
    NoFit = 1 << 0,
    Down = 1 << 1,
    Up = 1 << 2,
    NoFitButDownIsBetter = NoFit | Down,
    NoFitButUpIsBetter = NoFit | Up,
}

enum MenuState {
    Initial,
    Open,
    Closing,
    Closed,
}

export class MenuInstance implements EventListenerObject {
    readonly items: MenuItem[]

    document: Document
    blocker: HTMLDivElement
    menu: HTMLUListElement

    private readonly originalItems: MenuItem[]
    constructor(
        items: MenuItem[],
        { className, document, isDarkMode, maxItemsPerMenu, enableTranslate }: MenuInstanceOptions
    ) {
        this.originalItems = items
        this.items = items = cleanUpSeparators(items)

        this.document = document || window.document
        this.blocker = createBlocker(this.document)
        this.menu = createMenu({
            document: this.document,
            items,
            className,
            isDarkMode,
            maxItemsPerMenu,
            enableTranslate,
        })
    }

    async close(behavior: CloseBehavior, selection?: Selection): Promise<void> {
        if (!this.blocker.parentNode || !this.menu.parentNode) {
            return
        }

        if (this.state !== MenuState.Open) {
            throw Error(`Menu not in Open state (${this.state})`)
        }

        const { resolve, reject } = this

        if (!resolve || !reject) throw Error("Invalid internal state")

        this.state = MenuState.Closing

        // TODO: Ensure only one close is happening.
        // TODO: Immediately resolve/reject promise if behavior is NoAnimation.
        this.document.body.removeChild(this.blocker)

        window.removeEventListener("keydown", this.handleKeyDown, { capture: true })

        if (behavior === CloseBehavior.Immediate || behavior === CloseBehavior.Delayed) {
            await this.fadeOut(behavior !== CloseBehavior.Delayed)
        }

        this.state = MenuState.Closed

        this.document.body.removeChild(this.menu)

        if (selection) {
            resolve(selection)
        } else {
            resolve(null)
        }
    }

    handleEvent(event: Event): void {
        switch (event.type) {
            case "animationend":
                const { animationName } = event as AnimationEvent
                if (animationName === "menu-active-item") {
                    // The reason we do it this way is so that we can track hovers from a mouse event
                    // that starts inside an iframe. Normally JavaScript cannot know about these
                    // events, but CSS animations do trigger events so we can use that instead.
                    this.setActiveLI(event.target instanceof HTMLLIElement ? event.target : null)
                }
                if (animationName === "menu-safe-area-timeout" && isSafeArea(event.target)) {
                    event.target.classList.remove("enabled")
                }
                break
            case "contextmenu":
                event.preventDefault()
                event.stopPropagation()
                // TODO: Replicate the right click in Vekter.
                if (event.target === this.blocker && Date.now() - this.showTime > closeOnReleaseThreshold) {
                    this.close(CloseBehavior.Immediate)
                }
                break
            case "mousedown":
                if ((event as MouseEvent).button !== 0) {
                    break
                }
                this.mouseDownTime = Date.now()
                if (event.target === this.blocker) {
                    this.close(CloseBehavior.Immediate)
                }
                break
            case "mouseout":
                if (event.currentTarget === this.menu) {
                    this.setActiveLI(null)
                }
                break
            case "mouseover":
                if (event.target instanceof HTMLLIElement) {
                    this.setActiveLI(event.target)
                }
                break
            case "mouseup":
                // Ignore if the menu was just opened.
                if (Date.now() - this.showTime < closeOnReleaseThreshold) break

                if (event.target === this.blocker) {
                    this.close(CloseBehavior.Immediate)
                } else {
                    const { altKey, ctrlKey, metaKey, shiftKey } = event as MouseEvent
                    this.pick({ altKey, ctrlKey, metaKey, shiftKey })
                }
                break
            case "mousemove":
                if (event.target != this.activeLI) return

                // Requires `:scope`, because querySelector searches depth-first and will first go into submenus otherwise.
                const safeArea = this.activeLI?.querySelector(":scope > .safearea")
                if (safeArea instanceof HTMLElement) {
                    safeArea.classList.add("enabled")

                    const menuRight = this.activeLI?.querySelector(":scope > ul.expand-left") === null
                    const side = menuRight ? "100%" : "0"

                    const areaRect = safeArea.getBoundingClientRect()
                    const { clientX, clientY } = event as MouseEvent
                    const x = clientX - areaRect.left + safeMargin * (menuRight ? 1 : -1)
                    const y = clientY - areaRect.top

                    safeArea.style.clipPath = `polygon(${side} 0, ${x}px ${y - safeMargin}px, ${x}px ${
                        y + safeMargin
                    }px, ${side} 100%)`
                }
                break
        }
    }

    handleKeyDown = (event: KeyboardEvent): void => {
        if (this.state !== MenuState.Open) return
        if (event.key === "Escape" || event.key === "Esc") {
            this.close(CloseBehavior.Immediate)
            event.stopPropagation()
        }
    }

    isOpenWith(items: MenuItem[]): boolean {
        return this.activePromise !== null && this.originalItems === items
    }

    position({ location: { x, y }, within: maybeWithin, expandRight = true }: PositionOptions): void {
        if (!this.menu.parentNode) throw Error("Menu not in DOM")

        if (this.state !== MenuState.Open) {
            throw Error(`Menu not in Open state (${this.state})`)
        }

        // Default to document body area.
        const within = maybeWithin || this.document.body.getBoundingClientRect()
        // Inset area with a safe margin.
        const safeWithin = insetArea(within, safeMargin)

        // TODO: Early exit if values did not change.
        const { menu } = this
        menu.style.left = `${within.left + x + 2}px`
        menu.style.top = `${within.top + y}px`
        // Make sure the menu is measured without any transforms.
        menu.style.setProperty("transform", "none", "important")

        // Measure menu, then restore transforms.
        const rect = menu.getBoundingClientRect()
        menu.style.removeProperty("transform")

        // Don't let the menu go off screen.
        const fit = fitRectWithinArea(rect, safeWithin)
        menu.style.left = `${fit.left}px`
        menu.style.top = `${fit.top}px`

        // Make submenus expand in direction with space.
        Array.from(menu.querySelectorAll<HTMLUListElement>("li.submenu > ul")).forEach(subUL => {
            const anchorRect = subUL.parentElement?.getBoundingClientRect()
            if (!anchorRect) {
                // The <ul> is not in the DOM.
                return
            }

            let subRect = subUL.getBoundingClientRect()

            const subFit = fitRectWithinArea(subRect, safeWithin, anchorRect)
            if (subFit.flow & Flow.NoFit) {
                if (subFit.flow & Flow.Up) {
                    subUL.classList.add("anchor-bottom")
                } else {
                    subUL.classList.add("anchor-top")
                }
            } else if (subFit.flow & Flow.Up) {
                subUL.classList.add("expand-up")
            }

            if (expandRight) {
                // Go right, unless there's not enough space, then start going left.
                if (subRect.right > safeWithin.right) {
                    expandRight = false
                    subUL.classList.add("expand-left")
                }
            } else {
                // Go left...
                subUL.classList.add("expand-left")
                subRect = subUL.getBoundingClientRect()
                // ...unless there's not enough space, then start going right again.
                if (subRect.left < safeWithin.left) {
                    expandRight = true
                    subUL.classList.remove("expand-left")
                }
            }

            const anchorBottomOffset = anchorRect.bottom - safeWithin.bottom
            const anchorTopOffset = safeWithin.top - anchorRect.top
            subUL.style.setProperty("--anchor-bottom-offset", `${anchorBottomOffset}px`)
            subUL.style.setProperty("--anchor-top-offset", `${anchorTopOffset}px`)

            const safeArea = subUL.nextElementSibling // TODO: Tightly coupled to implementation in `createItem`
            if (isSafeArea(safeArea)) {
                safeArea.style.height = `${subRect.height}px`
                safeArea.style.setProperty("--anchor-bottom-offset", `${anchorBottomOffset}px`)
                safeArea.style.setProperty("--anchor-top-offset", `${anchorTopOffset}px`)
            }
        })
    }

    private activePromise: Promise<Selection | null> | null = null
    private onSelection?: (selection: Selection) => void
    show(options: PositionOptions, onSelection?: (selection: Selection) => void): Promise<Selection | null> {
        if (this.activePromise) throw Error("Menu already in DOM")
        if (this.state !== MenuState.Initial) {
            throw Error(`Menu not in Initial state (${this.state})`)
        }
        this.onSelection = onSelection
        this.state = MenuState.Open
        const { blocker, menu } = this

        window.addEventListener("keydown", this.handleKeyDown, { capture: true })

        this.document.body.appendChild(blocker)
        blocker.addEventListener("animationend", this)
        blocker.addEventListener("contextmenu", this)
        blocker.addEventListener("mousedown", this)
        blocker.addEventListener("mouseup", this)

        this.document.body.appendChild(menu)
        menu.addEventListener("animationend", this)
        menu.addEventListener("contextmenu", this)
        menu.addEventListener("mousedown", this)
        menu.addEventListener("mouseout", this)
        menu.addEventListener("mouseover", this)
        menu.addEventListener("mouseup", this)

        this.position(options)

        this.mouseDownTime = this.showTime = Date.now()

        this.activePromise = new Promise((resolve, reject) => {
            this.resolve = selection => {
                this.activePromise = null
                resolve(selection)
            }
            this.reject = () => {
                this.activePromise = null
                reject()
            }
        })
        return this.activePromise
    }

    async wait(): Promise<Selection | null> {
        if (!this.activePromise) return null
        return this.activePromise
    }

    private activeLI: HTMLLIElement | null = null
    private mouseDownTime = 0
    private reject?: () => void
    private resolve?: (selection: Selection | null) => void
    private showTime = 0
    private state = MenuState.Initial

    private async fadeOut(withoutDelay = false): Promise<void> {
        return animateWithClass(this.menu, {
            className: withoutDelay ? "disappearing-immediate" : "disappearing",
            animationName: "menu-disappearing",
        })
    }

    private async pick(info: {
        altKey: boolean
        ctrlKey: boolean
        metaKey: boolean
        shiftKey: boolean
    }): Promise<void> {
        // TODO: Only allow pick once.
        if (!this.activeLI || !isPickable(this.activeLI)) {
            if (Date.now() - this.mouseDownTime > closeOnReleaseThreshold) {
                // The mouse button was held down a long time so close the menu.
                this.close(CloseBehavior.Immediate)
            }
            return
        }

        const { path, action } = this.activeLI.dataset
        const { onSelection } = this

        if (!path) throw Error("Path missing in menu item")

        const selection: Selection = {
            path: path.split(",").map(n => parseInt(n, 10)),
            action,
            ...info,
        }

        if (onSelection) {
            onSelection(selection)
        }

        await animateWithClass(this.activeLI, {
            className: "picked",
            animationName: "menu-picked",
        })

        await this.close(CloseBehavior.Delayed, selection)
    }

    private setActiveLI(li: HTMLLIElement | null): void {
        // Safari doesn't do CSS hover on drag over, so we use a CSS class for this.
        if (this.activeLI) {
            this.activeLI.classList.remove("hover")
            this.activeLI.removeEventListener("mousemove", this)
        }

        if (li) {
            li.classList.add("hover")
            li.addEventListener("mousemove", this)
        }

        this.activeLI = li
    }
}

function createBlocker(document: Document): HTMLDivElement {
    const div = document.createElement("div")
    div.className = "menu-fisso-menu-blocker"
    return div
}

interface CreateItemResult {
    li: HTMLLIElement | null
    indexOffset: number
}

function createItem(
    document: Document,
    path: number[],
    item: MenuItem,
    maxItemsPerMenu?: number,
    enableTranslate?: boolean
): CreateItemResult {
    if (item.visible === false) {
        return { li: null, indexOffset: item.virtual ? 0 : 1 }
    }

    const li = document.createElement("li")

    const inner = document.createElement("div")
    inner.classList.add("inner")
    li.appendChild(inner)

    if (item.type === "separator") {
        li.classList.add("separator")
        return { li, indexOffset: item.virtual ? 0 : 1 }
    }
    const isDisabled = item.disabled || (item.submenu && item.submenu.length === 0)

    if (isDisabled) li.classList.add("disabled")
    if (item.submenu) li.classList.add("submenu")
    if (item.checked) li.classList.add("checked")
    if (!isDisabled && !item.virtual) {
        li.dataset.path = path.join(",")
        if (item.action) li.dataset.action = item.action
    }

    if (item.label) {
        const rowDiv = document.createElement("div")
        rowDiv.classList.add("row")
        inner.appendChild(rowDiv)

        const labelSpan = document.createElement("span")
        labelSpan.classList.add("label")
        if (enableTranslate) {
            labelSpan.classList.add("translate")
        }
        labelSpan.textContent = item.label
        rowDiv.appendChild(labelSpan)

        // Either displaying badge or accelerators
        if (item.badge && !item.submenu) {
            li.classList.add("has-badge")
            const badgeSpan = document.createElement("span")
            badgeSpan.classList.add("badge")
            badgeSpan.textContent = item.badge
            // Add custom className
            if (item.badgeCustomClass) {
                badgeSpan.classList.add(item.badgeCustomClass)
            }
            inner.appendChild(badgeSpan)
        } else {
            let acceleratorTokens = item.acceleratorLabelTokens
            if (!acceleratorTokens && item.accelerator) {
                acceleratorTokens = getAcceleratorLabelTokens(item.accelerator)
            }
            if (acceleratorTokens) {
                const aSpan = document.createElement("span")
                aSpan.classList.add("accelerator")
                const { tokenDelimiter } = item
                const tokensCount = acceleratorTokens.length
                acceleratorTokens.forEach((token: string, idx: number) => {
                    const tokenSpan = document.createElement("span")
                    tokenSpan.textContent = token
                    aSpan.appendChild(tokenSpan)
                    if (tokenDelimiter && idx < tokensCount - 1) {
                        const delimiterSpan = document.createElement("span")
                        delimiterSpan.classList.add("delimiter")
                        delimiterSpan.textContent = tokenDelimiter
                        aSpan.appendChild(delimiterSpan)
                    }
                })
                inner.appendChild(aSpan)
            }
        }

        if (item.icon) {
            const defaultIconSize = 14
            const iSpan = document.createElement("span")
            iSpan.classList.add("icon")

            iSpan.style.height = `${item.icon.height || defaultIconSize}px`
            iSpan.style.width = `${item.icon.width || defaultIconSize}px`
            if (item.icon.inlineSVG) {
                const parser = new DOMParser()
                const doc = parser.parseFromString(item.icon.src, "image/svg+xml")
                const iSvg = doc.documentElement
                iSpan.appendChild(iSvg)
            } else {
                const iImg = document.createElement("img")
                iImg.src = item.icon.src
                if (item.icon.crossOrigin !== "disabled") {
                    iImg.crossOrigin = item.icon.crossOrigin ?? "anonymous"
                }
                iSpan.appendChild(iImg)
            }
            rowDiv.prepend(iSpan)
        }

        if (item.description) {
            const dSpan = document.createElement("span")
            dSpan.classList.add("description")
            if (enableTranslate) {
                dSpan.classList.add("translate")
            }
            dSpan.textContent = item.description
            labelSpan.appendChild(dSpan)
        }
    }

    // This variable will track the start index offset for menu item path.
    let pathOffset = 0

    // Items with badge can not have submenu
    if (item.submenu && !isDisabled) {
        // Find a nice number of items per page that evenly distributes the number of items.
        // Most often itemsPerPage will just be the same as the number of items in submenu.
        const [numberOfPages, itemsPerPage] = paginate(item.submenu.length, maxItemsPerMenu)
        // Collect the list of menu items per page.
        const pageItems: MenuItem[][] = []
        for (let i = 0; i < numberOfPages; i++) {
            const start = i * itemsPerPage
            // Make sure to get remainder on the last page.
            const end = i < numberOfPages - 1 ? start + itemsPerPage : undefined
            pageItems.push(item.submenu.slice(start, end))
        }
        // Add a "More…" reference to the next page for each page (but the last one).
        for (let i = 0; i < numberOfPages - 1; i++) {
            pageItems[i].push({ label: "More…", submenu: pageItems[i + 1], virtual: true })
        }
        // Create the first page (the others will be discovered via the "More…" item).
        const ul = document.createElement("ul")

        let hasCheckedItem = false
        for (const subItem of pageItems[0]) {
            const subPath = Array.from(path)
            if (subItem.type !== "separator" && subItem.checked && !(subItem.visible === false)) hasCheckedItem = true
            if (item.virtual) {
                // Items within virtual submenus continue as if they were contained in their parent.
                subPath[subPath.length - 1] += pathOffset
            } else {
                // Non-virtual items go one level deeper in the menu path.
                subPath.push(pathOffset)
            }
            const { li: subLI, indexOffset: subIndexOffset } = createItem(
                document,
                subPath,
                subItem,
                maxItemsPerMenu,
                enableTranslate
            )
            if (item.virtual) {
                pathOffset += subIndexOffset
            } else {
                pathOffset++
            }
            if (!subLI) continue
            ul.appendChild(subLI)
        }
        ul.classList.add(hasCheckedItem ? "has-checked-item" : "reset-checked-padding")
        li.appendChild(ul)

        // Add a safe area element (used for keeping menus open when cursor is moving between them).
        const safeArea = document.createElement("div")
        safeArea.classList.add("safearea")
        li.appendChild(safeArea)
    }

    return { li, indexOffset: item.virtual ? pathOffset : 1 }
}

/**
 * Returns number of pages and items per page.
 */
function paginate(count: number, maxPerPage?: number): [number, number] {
    if (!maxPerPage) return [1, count]
    if (count > maxPerPage) {
        // We add 1 to the submenu length because of the virtual "More…" items that will appear on most pages.
        count += 1
    }
    const numberOfPages = Math.ceil(count / maxPerPage)
    const itemsPerPage = Math.max(Math.floor(count / numberOfPages), 1)
    return [numberOfPages, itemsPerPage]
}

interface CreateMenuOptions {
    document: Document
    items: MenuItem[]
    className?: string
    isDarkMode?: boolean
    enableTranslate?: boolean
    /**
     * If this limit is specified and exceeded, the menu will show a "More…"
     * item as the last item, containing the remaining items (recursively).
     *
     * Note that this does not apply to the outermost menu.
     */
    maxItemsPerMenu?: number
}

function createMenu({
    document,
    className,
    items,
    isDarkMode,
    maxItemsPerMenu,
    enableTranslate,
}: CreateMenuOptions): HTMLUListElement {
    const ul = document.createElement("ul")

    ul.classList.add("menu-fisso")
    ul.classList.toggle("menu-fisso-dark", isDarkMode)
    if (className) {
        className.split(" ").forEach(klass => {
            ul.classList.add(klass)
        })
    }

    items.forEach((item, i) => {
        const { li } = createItem(document, [i], item, maxItemsPerMenu, enableTranslate)
        if (!li) return
        if (item.type !== "separator" && item.checked && !(item.visible === false)) ul.classList.add("has-checked-item")
        ul.appendChild(li)
    })

    return ul
}

/** Fits a rect within the provided area and returns the new coordinates and flow information. */
function fitRectWithinArea(
    rect: DOMRect,
    within: Area,
    anchorRect?: DOMRect
): { left: number; top: number; flow: Flow } {
    const left = rect.right > within.right ? within.right - rect.width : rect.left
    const overflowDown = Math.max(0, rect.bottom - within.bottom)
    if (!overflowDown) {
        // Bottom edge ends within safe area.
        return { left, top: rect.top, flow: Flow.Down }
    }
    const top = anchorRect ? anchorRect.bottom - rect.height : within.bottom - rect.height
    const overflowUp = Math.max(0, within.top - top)
    if (!overflowUp) {
        // New top edge ends within safe area.
        return { left, top, flow: Flow.Up }
    }
    if (overflowUp > overflowDown) {
        // Changing to flow upwards would be worse.
        return { left, top: rect.top, flow: Flow.NoFitButDownIsBetter }
    }
    // Flowing up is not ideal, but better than down.
    return { left, top, flow: Flow.NoFitButUpIsBetter }
}

function insetArea(area: Area, amount: number): Area {
    return {
        bottom: area.bottom - amount,
        left: area.left + amount,
        right: area.right - amount,
        top: area.top + amount,
    }
}

function isPickable(li: HTMLLIElement): boolean {
    if (li.classList.contains("disabled")) return false

    if (li.classList.contains("submenu")) return false

    return true
}

function isSafeArea(element: EventTarget | Element | null): element is HTMLElement {
    return element instanceof HTMLElement && element.classList.contains("safearea")
}

/**
 * Cleans up an array of menu items by hiding separators at the start and end, as well as duplicate separators.
 *
 * The separators are hidden and not removed because the length of the items array and the order of the items is
 * relevant to trigger the correct actions
 *
 * @param items An array of menu items to be cleaned.
 */
export function cleanUpSeparators(items: MenuItem[]): MenuItem[] {
    // Store if a menu item that is not of type "separator" has been visible.
    let hasVisibleMenuItem = false

    // Store whether the last visible item of the items array was a separator and, if so, store the index.
    let lastVisibleItemIsSeparator: false | number = false

    const cleanedUpItems = items.map((item: MenuItem, index: number) => {
        // Always return if the item is already set to be invisible.
        if (item.visible === false) {
            return item
        }

        if (item.type !== "separator") {
            hasVisibleMenuItem = true
            lastVisibleItemIsSeparator = false
            if (!item.submenu) return item

            // Recursively clean up the submenu
            const submenu = cleanUpSeparators(item.submenu)
            return { ...item, submenu }
        }

        // If the current item is of type "separator"...

        // ...and it's the first or last element of the array,
        // always set to invisible.
        if (index === 0 || index === items.length - 1) {
            const visible = false

            return { ...item, visible }
        }

        // ...and items that are not of type "separator" have been seen, return the item as is.
        if (hasVisibleMenuItem) {
            // Reset hasVisibleMenuItem to false (as it's the start of a new menu section)
            hasVisibleMenuItem = false
            lastVisibleItemIsSeparator = index
            return item
        }

        // Otherwise, set the current separator to invisible,
        // and reset hasVisibleMenuItem to false (as it's the start of a new menu section).
        const visible = false
        hasVisibleMenuItem = false

        return { ...item, visible }
    })

    // If the last visible element of cleanedUpItems was not of type "separator", return cleanedUpItems.
    if (!lastVisibleItemIsSeparator) return cleanedUpItems

    // Otherwise, modify the last separator to make it invisible.
    cleanedUpItems[lastVisibleItemIsSeparator] = { ...cleanedUpItems[lastVisibleItemIsSeparator], visible: false }
    return cleanedUpItems
}