import { ChevronRight } from 'lucide-react'
import { FOUNDATION_THEME } from '../../tokens'
import Block from '../Primitives/Block/Block'
import { type MultiSelectMenuItemType } from './types'
import * as RadixMenu from '@radix-ui/react-dropdown-menu'
// eslint-disable-next-line import-x/no-cycle -- intentional recursion: SubMenu renders MenuItem which renders SubMenu
import MultiSelectMenuItem from './MultiSelectMenuItem'
import { type MultiSelectTokensType } from './multiSelect.tokens'
import { useResponsiveTokens } from '../../hooks/useResponsiveTokens'
import PrimitiveText from '../Primitives/PrimitiveText/PrimitiveText'

const MenuItemSlot = ({ slot }: { slot: React.ReactNode }) => {
    return (
        <Block flexShrink={0} height="auto" contentCentered>
            {slot}
        </Block>
    )
}

const MultiSelectSubMenu = ({
    item,
    onSelect,
    selected,
    maxSelections,
    focusIdentityEnabled,
}: {
    item: MultiSelectMenuItemType
    onSelect: (value: string) => void
    selected: string[]
    maxSelections?: number
    focusIdentityEnabled?: boolean
}) => {
    const multiSelectTokens =
        useResponsiveTokens<MultiSelectTokensType>('MULTI_SELECT')

    return (
        <RadixMenu.Sub>
            <RadixMenu.SubTrigger asChild>
                <Block
                    alignItems="center"
                    padding="8px 6px"
                    margin="0px 6px"
                    borderRadius={4}
                    outline="none"
                    border="none"
                    backgroundColor={
                        multiSelectTokens.menu.item.backgroundColor.default
                    }
                    _hover={{
                        backgroundColor:
                            multiSelectTokens.menu.item.backgroundColor.hover,
                    }}
                    _active={{
                        backgroundColor:
                            multiSelectTokens.menu.item.backgroundColor.active,
                    }}
                    _focus={{
                        backgroundColor:
                            multiSelectTokens.menu.item.backgroundColor.focus,
                    }}
                    _focusVisible={{
                        backgroundColor:
                            multiSelectTokens.menu.item.backgroundColor
                                .focusVisible,
                    }}
                    style={{ userSelect: 'none' }}
                >
                    <Block
                        display="flex"
                        alignItems="center"
                        gap={8}
                        justifyContent="space-between"
                    >
                        <Block
                            as="span"
                            display="flex"
                            alignItems="center"
                            gap={8}
                            flexGrow={1}
                        >
                            {item.slot1 && <MenuItemSlot slot={item.slot1} />}
                            {/* <Text
                variant="body.md"
                color={FOUNDATION_THEME.colors.gray[600]}
                fontWeight={500}
                truncate
              >
                {item.label}
              </Text> */}
                            <PrimitiveText
                                fontSize={
                                    multiSelectTokens.menu.item.option.fontSize
                                }
                                fontWeight={
                                    multiSelectTokens.menu.item.option
                                        .fontWeight
                                }
                                color={
                                    multiSelectTokens.menu.item.option.color
                                        .default
                                }
                                truncate
                            >
                                {item.label}
                            </PrimitiveText>
                        </Block>
                        {item.slot1 && <MenuItemSlot slot={item.slot2} />}
                        {item.slot2 && <MenuItemSlot slot={item.slot2} />}
                        {item.slot3 && <MenuItemSlot slot={item.slot3} />}
                        {item.slot4 && <MenuItemSlot slot={item.slot4} />}
                        <Block flexShrink={0} size={20} contentCentered>
                            <ChevronRight
                                size={16}
                                color={FOUNDATION_THEME.colors.gray[400]}
                            />
                        </Block>
                    </Block>
                </Block>
            </RadixMenu.SubTrigger>
            <RadixMenu.SubContent avoidCollisions sideOffset={8} asChild>
                <Block
                    backgroundColor={
                        multiSelectTokens.menu.backgroundColor as string
                    }
                    borderRadius={8}
                    padding="8px 0px"
                    boxShadow={FOUNDATION_THEME.shadows.sm}
                    border={`1px solid ${FOUNDATION_THEME.colors.gray[200]}`}
                >
                    {item.subMenu?.map((subItem, subIdx) => (
                        <MultiSelectMenuItem
                            key={subIdx}
                            item={subItem}
                            onSelect={onSelect}
                            selected={selected}
                            maxSelections={maxSelections}
                            focusIdentityEnabled={focusIdentityEnabled}
                        />
                    ))}
                </Block>
            </RadixMenu.SubContent>
        </RadixMenu.Sub>
    )
}

MultiSelectSubMenu.displayName = 'MultiSelectSubMenu'

export default MultiSelectSubMenu