import React from "react";

import type * as WPDS from "../theme";
import { styled } from "../theme";

import { DropdownMenu as ActionMenuPrimitive } from "radix-ui";

import { ActionMenuContext } from "./context";

const NAME = "ActionMenuRoot";

const StyledActionMenu = styled(ActionMenuPrimitive.Root, {});

export type DensityProp = "loose" | "default" | "compact";

export type ActionMenuRootProps = {
  /** Any React node may be used as a child to allow for formatting */
  children?: React.ReactNode;
  /** Override CSS */
  css?: WPDS.CSS;
  density?: DensityProp;
} & ActionMenuPrimitive.DropdownMenuProps;

export const ActionMenuRoot = ({
  density = "default",
  ...props
}: ActionMenuRootProps) => {
  return (
    <ActionMenuContext.Provider
      value={{
        density,
        level: 1,
      }}
    >
      <StyledActionMenu {...props} />
    </ActionMenuContext.Provider>
  );
};

ActionMenuRoot.displayName = NAME;