'use client'

import type { DropdownMenuProps } from '@radix-ui/react-dropdown-menu'

import {
  useLineHeightDropdownMenu,
  useLineHeightDropdownMenuState,
} from '@udecode/plate-line-height/react'
import { WrapText } from 'lucide-react'

import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuRadioGroup,
  DropdownMenuRadioItem,
  DropdownMenuTrigger,
  useOpenState,
} from './dropdown-menu'
import { ToolbarButton } from './toolbar'

export function LineHeightDropdownMenu({ ...props }: DropdownMenuProps) {
  const openState = useOpenState()
  const state = useLineHeightDropdownMenuState()
  const { radioGroupProps } = useLineHeightDropdownMenu(state)

  return (
    <DropdownMenu modal={false} {...openState} {...props}>
      <DropdownMenuTrigger asChild>
        <ToolbarButton pressed={openState.open} tooltip="Line height" isDropdown>
          <WrapText />
        </ToolbarButton>
      </DropdownMenuTrigger>

      <DropdownMenuContent className="min-w-0" align="start">
        <DropdownMenuRadioGroup {...radioGroupProps}>
          {state.values.map((_value) => (
            <DropdownMenuRadioItem key={_value} className="min-w-[180px]" value={_value}>
              {_value}
            </DropdownMenuRadioItem>
          ))}
        </DropdownMenuRadioGroup>
      </DropdownMenuContent>
    </DropdownMenu>
  )
}
