import {ArgTypes, Canvas, Markdown, Meta, Source} from '@storybook/blocks';
import * as PopoverStories from "./popover.stories";
import {RdxPopoverRootDirective} from "../src/popover-root.directive";
import {RdxPopoverContentDirective} from "../src/popover-content.directive";
import {RdxPopoverArrowDirective} from "../src/popover-arrow.directive";
import {RdxPopoverAnchorDirective} from "../src/popover-anchor.directive";
import {RdxPopoverTriggerDirective} from "../src/popover-trigger.directive";
import {RdxPopoverCloseDirective} from "../src/popover-close.directive";
import {animationStylesOnly} from "./utils/styles.constants";
import {RdxPopoverContentAttributesComponent} from "../src/popover-content-attributes.component";

<Meta title="Primitives/Popover" />

# Popover

#### Displays rich content in a portal, triggered by a button.

<br />
<br />

## Examples
### Default

<Canvas sourceState="hidden" of={PopoverStories.Default} />

### Multiple

<Canvas sourceState="hidden" of={PopoverStories.Multiple} />

### Events

<Canvas sourceState="hidden" of={PopoverStories.Events} />

### Positioning

<Canvas sourceState="hidden" of={PopoverStories.Positioning} />

### External Triggering

<Canvas sourceState="hidden" of={PopoverStories.ExternalTriggering} />

### Anchor

<Canvas sourceState="hidden" of={PopoverStories.Anchor} />

### Initially Open

<Canvas sourceState="hidden" of={PopoverStories.InitiallyOpen} />

### Animations

<Canvas sourceState="hidden" of={PopoverStories.Animations} />

### Animation Styles

<Source type="code" language="css" code={`${animationStylesOnly}`} />


## Features

- ✅ Opens when the trigger is clicked.
- ✅ Closes when the trigger is clicked again or when pressing escape.
- ✅ Controllable from outside.

## Anatomy

```html
<ng-container rdxPopoverRoot>
    <button class="IconButton" rdxPopoverTrigger>+</button>

    <ng-template rdxPopoverContent>
        <div class="PopoverContent" rdxPopoverContentAttributes>
            <button class="PopoverClose" rdxPopoverClose aria-label="Close">X</button>
            Popover Content
            <div class="PopoverArrow" rdxPopoverArrow></div>
        </div>
    </ng-template>
</ng-container>
```

## Import

Get started with importing the directives:

<Source type="code" language="typescript" code={`import {
  RdxPopoverRootDirective,
  RdxPopoverRootTrigger,
  RdxPopoverContentDirective,
  RdxPopoverArrowDirective,
  RdxPopoverAnchorDirective,
  RdxPopoverCloseDirective
} from '@radix-ng/primitives/popover';`} />

or

<Source type="code" language="typescript" code={`import { RdxPopoverModule } from '@radix-ng/primitives/popover';`} />

## API Reference

### Root
`RdxPopoverRootDirective`

Contains all the parts of a popover.

<ArgTypes of={RdxPopoverRootDirective} />

### Trigger
`RdxPopoverTriggerDirective`

The button that toggles the popover. By default, the PopoverContent will position itself against the trigger.

<Markdown>
{`
| Data attribute | Value          |
|----------------|----------------|
| [data-state]   | <code>"closed" | "open" (type RdxPopoverState)</code>
`}
</Markdown>

### Anchor
`RdxPopoverAnchorDirective`

An optional element to position the PopoverContent against. If this part is not used, the content will position alongside the PopoverTrigger.

### Content
`RdxPopoverContentDirective`

The component that pops out when the popover is open.

<ArgTypes of={RdxPopoverContentDirective} />

### Content Attributes
`RdxPopoverContentAttributesComponent`

A component with the content attributes that are necessary to run animations.

<ArgTypes of={RdxPopoverContentAttributesComponent} />

<Markdown>
{`
| Data attribute | Value          |
|----------------|----------------|
| [data-state]   | <code>"closed" | "open" (enum RdxPopoverState)</code>
| [data-side]    | <code>"left"   | "right" | "bottom" | "top" (enum RdxPositionSide)</code>
| [data-align]   | <code>"start"  | "end" | "center" (enum RdxPositionAlign)</code>
`}
</Markdown>

### Arrow
`RdxPopoverArrowDirective`

An optional arrow element to render alongside the popover. This can be used to help visually link the trigger with the PopoverContent. Must be rendered inside PopoverContent.

<ArgTypes of={RdxPopoverArrowDirective} />

### Close
`RdxPopoverCloseDirective`

An optional close button element to render alongside the popover. This can be used to close the PopoverContent. Must be rendered inside PopoverContent.
