import * as RadixMenu from '@radix-ui/react-dropdown-menu'
import Block from '../Primitives/Block/Block'
import Text from '../Text/Text'
import { ChevronRight } from 'lucide-react'
import styled from 'styled-components'
import { SelectItemV2 } from '../SelectV2'
import type { SingleSelectV2ItemType } from './singleSelectV2.types'
import type { SingleSelectV2TokensType } from './singleSelectV2.tokens'
import {
    submenuContentAnimations,
    hoverTransition,
} from './singleSelectV2.animations'

const StyledSubMenu = styled(RadixMenu.Sub)<{
    $padding: string
    $margin: string
}>`
    padding: ${({ $padding }) => $padding};
    margin: ${({ $margin }) => $margin};
`

const SubTrigger = styled(RadixMenu.SubTrigger)<{
    $padding: string
    $margin: string
    $borderRadius: string
    $bgHover: string
    $bgFocus: string
}>`
    align-items: center;
    padding: ${({ $padding }) => $padding};
    margin: ${({ $margin }) => $margin};
    border-radius: ${({ $borderRadius }) => $borderRadius};
    ${hoverTransition}
    &:hover {
        background-color: ${({ $bgHover }) => $bgHover};
    }
    &[data-disabled] {
        opacity: 0.5;
        cursor: not-allowed;
    }
    &[data-highlighted] {
        border: none;
        outline: none;
        background-color: ${({ $bgFocus }) => $bgFocus};
    }
`

const SubContent = styled(RadixMenu.SubContent)<{
    $backgroundColor: string
    $border: string
    $borderRadius: string
    $padding: string
    $boxShadow: string
}>`
    background-color: ${({ $backgroundColor }) => $backgroundColor};
    border: ${({ $border }) => $border};
    border-radius: ${({ $borderRadius }) => $borderRadius};
    padding: ${({ $padding }) => $padding};
    box-shadow: ${({ $boxShadow }) => $boxShadow};
    z-index: 1000;
    ${submenuContentAnimations}
`

export type SubMenuProps = {
    item: SingleSelectV2ItemType
    selected: string
    onSelect: (value: string) => void
    singleSelectTokens: SingleSelectV2TokensType
    focusIdentityEnabled?: boolean
}

export const SubMenu = ({
    item,
    onSelect,
    selected,
    singleSelectTokens,
    focusIdentityEnabled,
}: SubMenuProps) => {
    const sub = singleSelectTokens.menu.submenu
    const triggerPadding = [
        sub.trigger.paddingTop,
        sub.trigger.paddingRight,
        sub.trigger.paddingBottom,
        sub.trigger.paddingLeft,
    ]
        .filter(Boolean)
        .join(' ')
    const triggerMargin = String(sub.trigger.margin ?? '')
    const triggerRadius = String(sub.trigger.borderRadius ?? '')
    const bgHover = String(sub.trigger.backgroundColor.hover ?? '')
    const bgFocus = String(sub.trigger.backgroundColor.focus ?? '')
    const contentBg = String(sub.content.backgroundColor ?? '')
    const contentBorder = String(sub.content.border ?? '')
    const contentRadius = String(sub.content.borderRadius ?? '')
    const contentPadding = [
        sub.content.paddingTop,
        sub.content.paddingRight,
        sub.content.paddingBottom,
        sub.content.paddingLeft,
    ]
        .filter(Boolean)
        .join(' ')
    const contentShadow = String(sub.content.boxShadow ?? '')
    return (
        <StyledSubMenu $padding={triggerPadding} $margin={triggerMargin}>
            <SubTrigger
                asChild
                $padding={triggerPadding}
                $margin={triggerMargin}
                $borderRadius={triggerRadius}
                $bgHover={bgHover}
                $bgFocus={bgFocus}
            >
                <Block
                    display="flex"
                    alignItems="center"
                    gap={8}
                    justifyContent="space-between"
                >
                    <Block
                        as="span"
                        display="flex"
                        alignItems="center"
                        gap={8}
                        flexGrow={1}
                    >
                        {item.slot1 && (
                            <Block flexShrink={0} height="auto" contentCentered>
                                {item.slot1}
                            </Block>
                        )}
                        <Text
                            variant="body.md"
                            color={sub.optionText.color}
                            fontWeight={sub.optionText.fontWeight}
                            fontSize={sub.optionText.fontSize}
                            truncate
                        >
                            {item.label}
                        </Text>
                    </Block>
                    {item.slot2 && (
                        <Block flexShrink={0} height="auto" contentCentered>
                            {item.slot2}
                        </Block>
                    )}
                    {item.slot3 && (
                        <Block flexShrink={0} height="auto" contentCentered>
                            {item.slot3}
                        </Block>
                    )}
                    {item.slot4 && (
                        <Block flexShrink={0} height="auto" contentCentered>
                            {item.slot4}
                        </Block>
                    )}
                    <Block flexShrink={0} size={20} contentCentered>
                        <ChevronRight size={16} color={sub.iconColor} />
                    </Block>
                </Block>
            </SubTrigger>
            <SubContent
                avoidCollisions
                sideOffset={8}
                $backgroundColor={contentBg}
                $border={contentBorder}
                $borderRadius={contentRadius}
                $padding={contentPadding}
                $boxShadow={contentShadow}
            >
                {item.subMenu?.map((subItem, subIdx) => (
                    <MenuItem
                        key={subIdx}
                        item={subItem}
                        onSelect={onSelect}
                        selected={selected}
                        singleSelectTokens={singleSelectTokens}
                        focusIdentityEnabled={focusIdentityEnabled}
                    />
                ))}
            </SubContent>
        </StyledSubMenu>
    )
}

export type MenuItemProps = {
    item: SingleSelectV2ItemType
    selected: string
    onSelect: (value: string) => void
    singleSelectTokens?: SingleSelectV2TokensType
    index?: number
    focusIdentityEnabled?: boolean
}

export const MenuItem = ({
    item,
    onSelect,
    selected,
    singleSelectTokens,
    index,
    focusIdentityEnabled,
}: MenuItemProps) => {
    if (item.subMenu) {
        if (!singleSelectTokens) {
            console.error(
                'SingleSelectV2 MenuItem: singleSelectTokens is required when item has subMenu'
            )
            return null
        }
        return (
            <SubMenu
                item={item}
                onSelect={onSelect}
                selected={selected}
                singleSelectTokens={singleSelectTokens}
                focusIdentityEnabled={focusIdentityEnabled}
            />
        )
    }

    if (!singleSelectTokens) return null

    return (
        <SelectItemV2
            mode="single"
            item={item}
            onSelect={onSelect}
            selected={selected}
            itemTokens={singleSelectTokens.menu.item}
            index={index}
            showCheckmark
            focusIdentityValue={focusIdentityEnabled ? item.value : undefined}
        />
    )
}