import type { ReactNode } from 'react';
import { VariantProps, cva } from 'class-variance-authority';

import { DropdownMenu, Container } from '../dropdown-menu';
import { Item } from './action-item';
import { Separator } from './action-item-separator';

type ButtonStylesProps = VariantProps<typeof buttonStyles>;
const buttonStyles = cva('c-action-menu', {
  variants: {
    size: {
      xs: 'c-action-menu-xs',
      sm: 'c-action-menu-sm',
    },
  },
  defaultVariants: {
    size: 'sm',
  },
});

type ActionMenuProps = ButtonStylesProps & {
  children: ReactNode;
  container?: Container;
  tabIndex?: number;
  disabled?: boolean;
  onOpenChange?: (open: boolean) => void;
};

export function ActionMenu({ children, tabIndex, size, ...delegated }: ActionMenuProps) {
  return (
    <DropdownMenu.Root content={children} alignContent="center" {...delegated}>
      <button
        aria-label="more options"
        className={buttonStyles({ size })}
        data-testid="action-menu-button"
        tabIndex={tabIndex}
        type="button"
      >
        <span className="c-action-menu__trigger-text">Open more options</span>
        <span className="c-action-menu-dot"></span>
        <span className="c-action-menu-dot"></span>
        <span className="c-action-menu-dot"></span>
      </button>
    </DropdownMenu.Root>
  );
}

ActionMenu.Item = Item;
ActionMenu.Separator = Separator;
