import { defineRecipe } from '@bamboocss/dev'
import { toParts } from '../parts'
import { menuAnatomy } from '@ark-ui/react/menu'

const parts = toParts(menuAnatomy.build())

const itemStyle = {
  alignItems: 'center',
  borderRadius: 'md',
  cursor: 'pointer',
  display: 'flex',
  fontWeight: 'medium',
  mixin: 'sm',
  transitionDuration: 'fast',
  transitionProperty: 'background, color',
  transitionTimingFunction: 'default',
  h: '10',
  px: '2.5',
  mx: '1',
  transition: 'background 0.2s ease',
  _hover: {
    bg: { base: 'gray.100', _dark: '#3A3A3AFF' },
  },
  _highlighted: {
    bg: { base: 'gray.100', _dark: '#3A3A3AFF' },
  },
} as const

export const menu = defineRecipe({
  className: 'menu',
  description: 'The styles for the menu component',
  base: parts({
    content: {
      zIndex: '100',
      bg: { base: 'white', _dark: '#262626' },
      backdropFilter: 'blur(10px)',
      borderRadius: 'md',
      borderWidth: '1px',
      boxShadow: 'lg',
      display: 'flex',
      flexDirection: 'column',
      outline: 'none',
      width: 'calc(100% + 2rem)',
      py: '1',
      gap: '1',
      _hidden: {
        display: 'none',
      },
      _open: {
        animation: 'fadeIn 0.25s ease-out',
      },
      _closed: {
        animation: 'fadeOut 0.2s ease-out',
      },
    },
    itemGroupLabel: {
      fontWeight: 'semibold',
      mixin: 'sm',
    },
    itemGroup: {
      display: 'flex',
      flexDirection: 'column',
    },
    item: itemStyle,
    triggerItem: itemStyle,
  }),
})
