import styled from 'styled-components'
import * as RadixMenu from '@radix-ui/react-dropdown-menu'
import { MenuItemActionType, type MenuItemType, MenuItemVariant } from './types'
import Block from '../Primitives/Block/Block'
import Text from '../Text/Text'
// eslint-disable-next-line import-x/no-cycle -- intentional recursion: SubMenu renders MenuItem which renders SubMenu
import MenuItem from './MenuItem'
import { ChevronRightIcon, Search } from 'lucide-react'
import {
    getMenuItemStateToken,
    type MenuItemStates,
    type MenuTokensType,
} from './menu.tokens'
import PrimitiveText from '../Primitives/PrimitiveText/PrimitiveText'
import { useResponsiveTokens } from '../../hooks/useResponsiveTokens'
import SearchInput from '../Inputs/SearchInput/SearchInput'
import { FOUNDATION_THEME } from '../../tokens'
import { filterMenuItem, defaultSearchSortFn } from './utils'
import React, { useState, useRef, useMemo, useCallback } from 'react'
import { submenuContentAnimations } from './menu.animations'
import { VirtualList, type VirtualListItem } from '../VirtualList'
import type { MenuSelectionMode, MenuSelectionStyle } from './selection'

const MenuSlot = ({ slot }: { slot: React.ReactNode }) => {
    return (
        <Block
            data-element="left-slot"
            flexShrink={0}
            height="auto"
            contentCentered
        >
            {slot}
        </Block>
    )
}

const SubContent = styled(RadixMenu.SubContent)`
    box-shadow: ${FOUNDATION_THEME.shadows.sm};
    z-index: 101;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none;
    scrollbar-color: transparent transparent;
    padding-bottom: 6px;
    border-radius: 8px;

    ${submenuContentAnimations}
`

const getBgColor = (
    state: MenuItemStates,
    menuTokens: MenuTokensType,
    item: MenuItemType
) => {
    const bg = menuTokens.item.backgroundColor

    // check for variant
    if (
        item.variant === MenuItemVariant.DEFAULT ||
        (item.subMenu && item.subMenu.length > 0)
    ) {
        if (!item.disabled) {
            return getMenuItemStateToken(bg.default.enabled, state)
        } else {
            return getMenuItemStateToken(bg.default.disabled, state)
        }
    } else {
        // check for action type
        if (item.actionType === undefined) {
            item.actionType = MenuItemActionType.PRIMARY
        }
        if (item.actionType === MenuItemActionType.PRIMARY) {
            if (!item.disabled) {
                return getMenuItemStateToken(bg.action.primary.enabled, state)
            } else {
                return getMenuItemStateToken(bg.action.primary.disabled, state)
            }
        } else {
            if (!item.disabled) {
                return getMenuItemStateToken(bg.action.danger.enabled, state)
            } else {
                return getMenuItemStateToken(bg.action.danger.disabled, state)
            }
        }
    }
}

const getLabelColor = (
    state: MenuItemStates,
    menuTokens: MenuTokensType,
    item: MenuItemType
) => {
    const bg = menuTokens.item.option.color

    // check for variant
    if (
        item.variant === MenuItemVariant.DEFAULT ||
        (item.subMenu && item.subMenu.length > 0)
    ) {
        if (!item.disabled) {
            return getMenuItemStateToken(bg.default.enabled, state)
        } else {
            return getMenuItemStateToken(bg.default.disabled, state)
        }
    } else {
        // check for action type
        if (item.actionType === undefined) {
            item.actionType = MenuItemActionType.PRIMARY
        }
        if (item.actionType === MenuItemActionType.PRIMARY) {
            if (!item.disabled) {
                return getMenuItemStateToken(bg.action.primary.enabled, state)
            } else {
                return getMenuItemStateToken(bg.action.primary.disabled, state)
            }
        } else {
            if (!item.disabled) {
                return getMenuItemStateToken(bg.action.danger.enabled, state)
            } else {
                return getMenuItemStateToken(bg.action.danger.disabled, state)
            }
        }
    }
}

const getSubLabelColor = (
    state: MenuItemStates,
    menuTokens: MenuTokensType,
    item: MenuItemType
) => {
    const bg = menuTokens.item.description.color

    // check for variant
    if (
        item.variant === MenuItemVariant.DEFAULT ||
        (item.subMenu && item.subMenu.length > 0)
    ) {
        if (!item.disabled) {
            return getMenuItemStateToken(bg.default.enabled, state)
        } else {
            return getMenuItemStateToken(bg.default.disabled, state)
        }
    } else {
        // check for action type
        if (item.actionType === undefined) {
            item.actionType = MenuItemActionType.PRIMARY
        }
        if (item.actionType === MenuItemActionType.PRIMARY) {
            if (!item.disabled) {
                return getMenuItemStateToken(bg.action.primary.enabled, state)
            } else {
                return getMenuItemStateToken(bg.action.primary.disabled, state)
            }
        } else {
            if (!item.disabled) {
                return getMenuItemStateToken(bg.action.danger.enabled, state)
            } else {
                return getMenuItemStateToken(bg.action.danger.disabled, state)
            }
        }
    }
}

export const SubMenu = ({
    item,
    idx,
    maxHeight,
    selectionStyle,
    selectionMode,
}: {
    item: MenuItemType
    idx: number
    maxHeight?: number
    selectionStyle?: MenuSelectionStyle
    selectionMode?: MenuSelectionMode
}) => {
    const menuTokens = useResponsiveTokens<MenuTokensType>('MENU')
    const [searchText, setSearchText] = useState<string>('')
    const searchInputRef = useRef<HTMLInputElement>(null)

    const {
        enableSubMenuVirtualScrolling = false,
        subMenuVirtualItemHeight = 40,
        subMenuVirtualOverscan = 5,
        subMenuVirtualScrollThreshold = 20,
    } = item

    const filteredSubMenuItems = React.useMemo(() => {
        if (!item.subMenu) return []
        if (!searchText || !item.enableSubMenuSearch) return item.subMenu

        const lower = searchText.toLowerCase()
        const matched = item.subMenu
            .map((subItem) => filterMenuItem(subItem, lower))
            .filter(Boolean) as MenuItemType[]

        const sortFn = item.subMenuSearchSortFn ?? defaultSearchSortFn
        return sortFn(matched, searchText)
    }, [
        item.subMenu,
        searchText,
        item.enableSubMenuSearch,
        item.subMenuSearchSortFn,
    ])

    const totalItemCount = useMemo(() => {
        return filteredSubMenuItems.length
    }, [filteredSubMenuItems])

    const shouldUseVirtualScrolling =
        enableSubMenuVirtualScrolling &&
        totalItemCount >= subMenuVirtualScrollThreshold

    const virtualListItems = useMemo(() => {
        const virtualItems: VirtualListItem[] = []

        filteredSubMenuItems.forEach((subItem, subIdx) => {
            virtualItems.push({
                id: `submenu-item-${idx}-${subIdx}`,
                data: {
                    item: subItem,
                    idx: subIdx,
                },
            })
        })

        return virtualItems
    }, [filteredSubMenuItems, idx])

    const renderVirtualItem = useCallback(
        ({ item }: { item: VirtualListItem; index: number }) => {
            const data = item.data as { item: MenuItemType; idx: number }
            return (
                <MenuItem
                    key={data.idx}
                    item={data.item}
                    idx={data.idx}
                    selectionStyle={selectionStyle}
                    selectionMode={selectionMode}
                />
            )
        },
        [selectionMode, selectionStyle]
    )

    const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        setSearchText(e.target.value)
    }

    return (
        <RadixMenu.Sub key={idx}>
            <RadixMenu.SubTrigger
                asChild
                style={{ outline: 'none', border: 'none' }}
            >
                <Block
                    data-element="menu-item"
                    data-id={item.label || 'menu-item'}
                    data-status={item.disabled ? 'disabled' : 'enabled'}
                    data-numeric={idx + 1}
                    display="flex"
                    flexDirection="column"
                    gap={menuTokens.item.gap}
                    width="calc(100% - 12px)"
                    paddingX={menuTokens.item.padding.x}
                    paddingY={menuTokens.item.padding.y}
                    marginY={menuTokens.item.margin.y}
                    marginX={menuTokens.item.margin.x}
                    borderRadius={menuTokens.item.borderRadius}
                    color={getLabelColor('default', menuTokens, item)}
                    _hover={{
                        backgroundColor: getBgColor('hover', menuTokens, item),
                    }}
                    _focus={{
                        backgroundColor: getBgColor('focus', menuTokens, item),
                    }}
                    _active={{
                        backgroundColor: getBgColor('active', menuTokens, item),
                    }}
                    _focusVisible={{
                        backgroundColor: getBgColor(
                            'focusVisible',
                            menuTokens,
                            item
                        ),
                    }}
                    style={{ userSelect: 'none' }}
                >
                    <Block
                        display="flex"
                        alignItems="center"
                        gap={4}
                        width="100%"
                    >
                        {item.slot1 && <MenuSlot slot={item.slot1} />}
                        <Block
                            display="flex"
                            flexGrow={1}
                            alignItems="center"
                            maxWidth="100%"
                            overflow="hidden"
                        >
                            <Text
                                variant="body.md"
                                fontWeight={
                                    menuTokens.item.optionsLabel.fontWeight
                                }
                                fontSize={menuTokens.item.optionsLabel.fontSize}
                                truncate
                                color={getLabelColor(
                                    'default',
                                    menuTokens,
                                    item
                                )}
                            >
                                {item.label}
                            </Text>
                        </Block>
                        {item.slot2 && <MenuSlot slot={item.slot2} />}
                        {item.slot3 && <MenuSlot slot={item.slot3} />}
                        {item.slot4 && <MenuSlot slot={item.slot4} />}

                        <Block
                            data-element="chevron-icon"
                            flexShrink={0}
                            size="auto"
                            contentCentered
                        >
                            <ChevronRightIcon size={16} />
                        </Block>
                    </Block>
                    {item.subLabel && (
                        <Block display="flex" alignItems="center" width="100%">
                            <PrimitiveText
                                color={getSubLabelColor(
                                    'default',
                                    menuTokens,
                                    item
                                )}
                                fontWeight={
                                    menuTokens.item.description.fontWeight
                                }
                                fontSize={menuTokens.item.description.fontSize}
                            >
                                {item.subLabel}
                            </PrimitiveText>
                        </Block>
                    )}
                </Block>
            </RadixMenu.SubTrigger>
            <RadixMenu.Portal>
                <SubContent
                    style={{
                        backgroundColor: menuTokens.backgroundColor,
                        paddingTop: item.enableSubMenuSearch
                            ? 0
                            : menuTokens.padding.y,
                        paddingBottom: menuTokens.padding.y,
                        paddingRight: menuTokens.padding.x,
                        paddingLeft: menuTokens.padding.x,
                        borderRadius: menuTokens.borderRadius,
                        minWidth: '200px',
                        maxWidth: '280px',
                        maxHeight: maxHeight
                            ? `${maxHeight}px`
                            : 'var(--radix-popper-available-height)',
                        overflowY: 'auto',
                        border: menuTokens.border,
                    }}
                    avoidCollisions
                    onFocusCapture={(e) => {
                        if (
                            item.enableSubMenuSearch &&
                            searchText &&
                            searchInputRef.current
                        ) {
                            if (e.target !== searchInputRef.current) {
                                e.preventDefault()
                                searchInputRef.current.focus()
                            }
                        }
                    }}
                >
                    {item.enableSubMenuSearch && (
                        <Block
                            width="100%"
                            position="sticky"
                            top={0}
                            left={0}
                            right={0}
                            zIndex={101}
                            backgroundColor={
                                menuTokens.backgroundColor as string
                            }
                        >
                            <SearchInput
                                ref={searchInputRef}
                                leftSlot={
                                    <Search
                                        color={
                                            FOUNDATION_THEME.colors.gray[400]
                                        }
                                        size={16}
                                    />
                                }
                                placeholder={
                                    item.subMenuSearchPlaceholder || 'Search...'
                                }
                                value={searchText}
                                onChange={handleSearchChange}
                                autoFocus
                                onKeyDown={(e) => {
                                    if (e.key === 'Enter') {
                                        e.stopPropagation()
                                        e.preventDefault()
                                        item.onSubMenuSearchEnter?.(
                                            searchText,
                                            filteredSubMenuItems
                                        )
                                        return
                                    }
                                    if (e.key.length === 1) {
                                        e.stopPropagation()
                                    }
                                }}
                            />
                        </Block>
                    )}
                    {shouldUseVirtualScrolling ? (
                        <Block
                            style={{
                                height: maxHeight
                                    ? `${maxHeight}px`
                                    : 'var(--radix-popper-available-height)',
                                position: 'relative',
                            }}
                        >
                            <VirtualList
                                items={virtualListItems}
                                renderItem={renderVirtualItem}
                                height={maxHeight || 400}
                                itemHeight={subMenuVirtualItemHeight}
                                overscan={subMenuVirtualOverscan}
                            />
                        </Block>
                    ) : (
                        <>
                            {filteredSubMenuItems.map((subItem, subIdx) => (
                                <MenuItem
                                    key={subIdx}
                                    item={subItem}
                                    idx={subIdx}
                                    selectionStyle={selectionStyle}
                                    selectionMode={selectionMode}
                                />
                            ))}
                        </>
                    )}
                </SubContent>
            </RadixMenu.Portal>
        </RadixMenu.Sub>
    )
}