import type { FocusEvent, KeyboardEvent } from 'react'
import * as RadixMenu from '@radix-ui/react-dropdown-menu'
import styled, { type CSSObject } from 'styled-components'
import React, { useRef, useMemo } from 'react'
import { useVirtualizer } from '@tanstack/react-virtual'
import { Search } from 'lucide-react'
import Block from '../Primitives/Block/Block'
import PrimitiveText from '../Primitives/PrimitiveText/PrimitiveText'
import SearchInput from '../Inputs/SearchInput/SearchInput'
import MenuV2Item from './MenuV2Item'
import MenuV2SubMenu from './MenuV2SubMenu'
import type { MenuV2GroupType, MenuV2ItemType } from './menuV2.types'
import type { MenuV2VirtualScrollingConfig } from './menuV2.types'
import type { MenuV2TokensType } from './menuV2.tokens'
import { menuV2ContentAnimations } from './menuV2.animations'
import { flattenMenuV2Groups, type MenuV2FlatRow } from './menuV2.utils'
import { getBaseVirtualViewportHeight } from '../common/virtualViewport'
import { addPxToValue } from '../../global-utils/GlobalUtils'

type ContentStyledProps = { $zIndex?: number | string }

const Content = styled(RadixMenu.Content)<ContentStyledProps>`
    position: relative;
    z-index: ${(p) => p.$zIndex ?? 101};
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none;
    scrollbar-color: transparent transparent;

    &[data-state='closed'] {
        pointer-events: none;
    }

    ${menuV2ContentAnimations}
`

const DEFAULT_VIRTUAL_ITEM_HEIGHT = 40
const DEFAULT_VIRTUAL_OVERSCAN = 2
const DEFAULT_VIRTUAL_THRESHOLD = 30

function renderFlatRow(
    row: MenuV2FlatRow,
    tokens: MenuV2TokensType,
    maxHeight?: CSSObject['maxHeight']
) {
    if (row.type === 'label') {
        return (
            <RadixMenu.Label asChild>
                <PrimitiveText
                    data-element="menu-group-label"
                    fontSize={tokens.group.label.fontSize}
                    fontWeight={tokens.group.label.fontWeight}
                    color={tokens.group.label.color}
                    lineHeight={addPxToValue(tokens.group.label.lineHeight)}
                    padding={`${tokens.group.label.paddingTop} ${tokens.group.label.paddingRight} ${tokens.group.label.paddingBottom} ${tokens.group.label.paddingLeft}`}
                    userSelect="none"
                    textTransform="uppercase"
                    margin={`${tokens.group.label.marginTop} ${tokens.group.label.marginRight} ${tokens.group.label.marginBottom} ${tokens.group.label.marginLeft}`}
                >
                    {row.label}
                </PrimitiveText>
            </RadixMenu.Label>
        )
    }
    if (row.type === 'separator') {
        return (
            <RadixMenu.Separator asChild>
                <Block
                    as="div"
                    role="separator"
                    height={tokens.separator.height}
                    backgroundColor={tokens.separator.color}
                    marginTop={tokens.separator.marginTop}
                    marginRight={tokens.separator.marginRight}
                    marginBottom={tokens.separator.marginBottom}
                    marginLeft={tokens.separator.marginLeft}
                    aria-hidden="true"
                />
            </RadixMenu.Separator>
        )
    }
    const { item, itemIndex, selectionStyle, selectionMode } = row
    return item.subMenu && item.subMenu.length > 0 ? (
        <MenuV2SubMenu
            key={row.id}
            item={item}
            index={itemIndex}
            maxHeight={maxHeight}
            selectionStyle={selectionStyle}
            selectionMode={selectionMode}
        />
    ) : (
        <MenuV2Item
            key={row.id}
            item={item}
            index={itemIndex}
            itemTokens={tokens.group.item}
            selectionStyle={selectionStyle}
            selectionMode={selectionMode}
        />
    )
}

export type MenuV2ContentProps = {
    filteredItems: MenuV2GroupType[]
    menuTokens: MenuV2TokensType
    enableSearch: boolean
    searchPlaceholder: string
    searchText: string
    onSearchTextChange: (value: string) => void
    onEnter?: () => void
    maxHeight?: CSSObject['maxHeight']
    minHeight?: CSSObject['minHeight']
    minWidth?: CSSObject['minWidth']
    maxWidth?: CSSObject['maxWidth']
    enableVirtualScrolling?: boolean
    virtualScrolling?: MenuV2VirtualScrollingConfig
    alignment?: 'start' | 'center' | 'end'
    side?: 'top' | 'right' | 'bottom' | 'left'
    sideOffset?: number
    alignOffset?: number
    collisionBoundaryRef?: HTMLElement | null | (HTMLElement | null)[]
    onInteractOutside?: (e: unknown) => void
    onPointerDownOutside?: (e: unknown) => void
    onFocusCapture?: (e: FocusEvent<HTMLDivElement>) => void
    onKeyDown?: (e: KeyboardEvent<HTMLDivElement>) => void
}

const MenuV2Content = React.forwardRef<HTMLDivElement, MenuV2ContentProps>(
    (
        {
            filteredItems,
            menuTokens,
            enableSearch,
            searchPlaceholder,
            searchText,
            onSearchTextChange,
            onEnter,
            maxHeight,
            minHeight,
            minWidth: minWidthProp,
            maxWidth: maxWidthProp,
            enableVirtualScrolling = false,
            virtualScrolling,
            alignment = 'center',
            side = 'bottom',
            sideOffset = 8,
            alignOffset = 0,
            collisionBoundaryRef,
            onInteractOutside,
            onPointerDownOutside,
            onKeyDown,
        },
        ref
    ) => {
        const searchInputRef = useRef<HTMLInputElement>(null)
        const virtualScrollRef = useRef<HTMLDivElement>(null)
        const content = menuTokens

        const minWidth =
            minWidthProp ??
            (typeof content.minWidth === 'number' ? content.minWidth : 200)
        const maxWidth =
            maxWidthProp ??
            (typeof content.maxWidth === 'number' ? content.maxWidth : 280)

        const flatRows = useMemo(
            () => flattenMenuV2Groups(filteredItems),
            [filteredItems]
        )
        const itemHeight =
            virtualScrolling?.itemHeight ?? DEFAULT_VIRTUAL_ITEM_HEIGHT
        const overscan = virtualScrolling?.overscan ?? DEFAULT_VIRTUAL_OVERSCAN
        const threshold =
            virtualScrolling?.threshold ?? DEFAULT_VIRTUAL_THRESHOLD
        const useVirtual =
            enableVirtualScrolling && flatRows.length >= threshold

        const viewportHeight = getBaseVirtualViewportHeight(maxHeight as number)
        const virtualizer = useVirtualizer({
            count: flatRows.length,
            getScrollElement: () => virtualScrollRef.current,
            getItemKey: (index) => flatRows[index]?.id ?? index,
            estimateSize: (index) => {
                const row = flatRows[index]
                if (row?.type === 'label') return 28
                if (row?.type === 'separator') return 8
                return itemHeight
            },
            overscan,
            enabled: useVirtual,
            initialRect: { width: 0, height: viewportHeight },
        })
        const virtualItems = virtualizer.getVirtualItems()
        const virtualGroups = new Map<
            number,
            Array<{
                virtualRow: (typeof virtualItems)[number]
                row: MenuV2FlatRow
            }>
        >()

        virtualItems.forEach((virtualRow) => {
            const row = flatRows[virtualRow.index]
            if (!row) return

            const groupId = row.groupId ?? virtualRow.index
            const groupRows = virtualGroups.get(groupId) ?? []
            groupRows.push({ virtualRow, row })
            virtualGroups.set(groupId, groupRows)
        })

        return (
            <Content
                ref={ref}
                data-menu="menu"
                data-dropdown="dropdown"
                sideOffset={sideOffset}
                alignOffset={alignOffset}
                side={side}
                align={alignment}
                collisionBoundary={collisionBoundaryRef ?? undefined}
                onInteractOutside={onInteractOutside}
                onPointerDownOutside={onPointerDownOutside}
                onKeyDown={onKeyDown}
                onFocusCapture={(e: FocusEvent<HTMLDivElement>) => {
                    if (enableSearch && searchInputRef.current) {
                        if (e.target === e.currentTarget) {
                            searchInputRef.current.focus()
                        }
                    }
                }}
                onCloseAutoFocus={(event: Event) => event.preventDefault()}
                $zIndex={content.zIndex}
                style={{
                    maxHeight: maxHeight
                        ? `${maxHeight}px`
                        : 'var(--radix-popper-available-height)',
                    minHeight: minHeight ? `${minHeight}px` : undefined,
                    minWidth: `${minWidth}px`,
                    maxWidth: `${maxWidth}px`,
                    paddingTop: enableSearch ? 0 : content.paddingTop,
                    paddingRight: content.paddingRight,
                    paddingBottom: content.paddingBottom,
                    paddingLeft: content.paddingLeft,
                    backgroundColor: content.backgroundColor,
                    border: content.border,
                    borderRadius: content.borderRadius,
                    boxShadow: content.boxShadow,
                }}
            >
                {enableSearch && (
                    <Block
                        width="100%"
                        position="sticky"
                        top={0}
                        left={0}
                        right={0}
                        zIndex={content.zIndex}
                        backgroundColor={content.backgroundColor}
                        padding="0"
                    >
                        <SearchInput
                            ref={searchInputRef}
                            leftSlot={
                                <Search
                                    size={content.searchIcon.width}
                                    color="currentColor"
                                    aria-hidden
                                />
                            }
                            placeholder={searchPlaceholder}
                            value={searchText}
                            onChange={(e) => onSearchTextChange(e.target.value)}
                            onKeyDown={(e) => {
                                e.stopPropagation()
                                if (e.key === 'Enter') {
                                    e.preventDefault()
                                    onEnter?.()
                                }
                            }}
                            aria-label={
                                searchPlaceholder
                                    ? `Search menu items: ${searchPlaceholder}`
                                    : 'Search menu items'
                            }
                        />
                    </Block>
                )}
                {useVirtual ? (
                    <Block
                        ref={virtualScrollRef}
                        style={{
                            paddingTop: enableSearch ? 0 : content.paddingTop,
                            maxHeight: maxHeight
                                ? `${maxHeight}px`
                                : 'var(--radix-popper-available-height)',
                            minHeight: minHeight ? `${minHeight}px` : undefined,
                            overflow: 'auto',
                        }}
                    >
                        <Block
                            style={{
                                height: `${virtualizer.getTotalSize()}px`,
                                width: '100%',
                                position: 'relative',
                            }}
                        >
                            {Array.from(virtualGroups).map(
                                ([groupId, rows]) => (
                                    <RadixMenu.Group
                                        key={`virtual-group-${groupId}`}
                                    >
                                        {rows.map(({ virtualRow, row }) => (
                                            <Block
                                                key={virtualRow.key}
                                                style={{
                                                    position: 'absolute',
                                                    top: 0,
                                                    left: 0,
                                                    width: '100%',
                                                    transform: `translateY(${virtualRow.start}px)`,
                                                }}
                                            >
                                                {renderFlatRow(
                                                    row,
                                                    content,
                                                    maxHeight
                                                )}
                                            </Block>
                                        ))}
                                    </RadixMenu.Group>
                                )
                            )}
                        </Block>
                    </Block>
                ) : (
                    <Block
                        style={{
                            paddingTop: enableSearch ? 0 : content.paddingTop,
                            minHeight: minHeight ? `${minHeight}px` : undefined,
                        }}
                    >
                        {filteredItems.map((group, groupId) => (
                            <RadixMenu.Group
                                key={group.id ?? `group-${groupId}`}
                            >
                                {group.label && (
                                    <RadixMenu.Label asChild>
                                        <PrimitiveText
                                            data-element="menu-group-label"
                                            data-id={
                                                group.label
                                                    ? `menu-group-${groupId}`
                                                    : 'menu-group-label'
                                            }
                                            fontSize={
                                                content.group.label.fontSize
                                            }
                                            fontWeight={
                                                content.group.label.fontWeight
                                            }
                                            lineHeight={addPxToValue(
                                                content.group.label.lineHeight
                                            )}
                                            color={content.group.label.color}
                                            style={{
                                                userSelect: 'none',
                                                textTransform: 'uppercase',
                                                paddingTop:
                                                    content.group.label
                                                        .paddingTop,
                                                paddingRight:
                                                    content.group.label
                                                        .paddingRight,
                                                paddingBottom:
                                                    content.group.label
                                                        .paddingBottom,
                                                paddingLeft:
                                                    content.group.label
                                                        .paddingLeft,
                                                marginTop:
                                                    content.group.label
                                                        .marginTop,
                                                marginRight:
                                                    content.group.label
                                                        .marginRight,
                                                marginBottom:
                                                    content.group.label
                                                        .marginBottom,
                                                marginLeft:
                                                    content.group.label
                                                        .marginLeft,
                                            }}
                                        >
                                            {group.label}
                                        </PrimitiveText>
                                    </RadixMenu.Label>
                                )}
                                {group.items.map(
                                    (
                                        item: MenuV2ItemType,
                                        itemIndex: number
                                    ) =>
                                        item.subMenu &&
                                        item.subMenu.length > 0 ? (
                                            <MenuV2SubMenu
                                                key={
                                                    item.id ??
                                                    `group-${groupId}-item-${itemIndex}`
                                                }
                                                item={item}
                                                index={itemIndex}
                                                maxHeight={maxHeight}
                                                selectionStyle={
                                                    group.selectionStyle
                                                }
                                                selectionMode={
                                                    group.selectionMode
                                                }
                                            />
                                        ) : (
                                            <MenuV2Item
                                                key={
                                                    item.id ??
                                                    `group-${groupId}-item-${itemIndex}`
                                                }
                                                item={item}
                                                index={itemIndex}
                                                itemTokens={content.group.item}
                                                selectionStyle={
                                                    group.selectionStyle
                                                }
                                                selectionMode={
                                                    group.selectionMode
                                                }
                                            />
                                        )
                                )}
                                {groupId !== filteredItems.length - 1 &&
                                    group.showSeparator && (
                                        <RadixMenu.Separator asChild>
                                            <Block
                                                as="div"
                                                role="separator"
                                                height={
                                                    content.separator.height
                                                }
                                                backgroundColor={
                                                    content.separator.color
                                                }
                                                marginTop={
                                                    content.separator.marginTop
                                                }
                                                marginRight={
                                                    content.separator
                                                        .marginRight
                                                }
                                                marginBottom={
                                                    content.separator
                                                        .marginBottom
                                                }
                                                marginLeft={
                                                    content.separator.marginLeft
                                                }
                                                aria-hidden="true"
                                            />
                                        </RadixMenu.Separator>
                                    )}
                            </RadixMenu.Group>
                        ))}
                    </Block>
                )}
            </Content>
        )
    }
)
MenuV2Content.displayName = 'MenuV2Content'

export default MenuV2Content