import { ArgsTable, Meta, Story } from "@storybook/addon-docs";
import { Button, ButtonGroup } from "@components/button";
import { ComponentInfo, Preview, Tagline } from "@stories/components";
import { Content, Footer, InnerContent } from "@components/placeholders";
import { Heading, InnerHeading } from "@components/typography";
import { InnerPopover, InnerPopoverTrigger, Popover, PopoverTrigger } from "@components/popover";

<Meta
    title="Components/Popover"
    id="popover"
/>

# Popover

<Tagline>A Popover can be used to display some content on top of another.</Tagline>

<ComponentInfo
    usage={"import { PopoverTrigger, Popover, Heading, Content, Footer, usePopoverTriggerContext } from \"@sharegate/orbit-ui\";"}
    githubPath="/packages/components/src/popover/src"
/>

## Guidelines

### Content

- Minimally have an heading and some content.

### Popover vs Tooltip

- A popover is not meant to be used as a [tooltip](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/tooltip_role) element. If you need a component which behave like one use Orbit's [tooltip](?path=/docs/tooltip--default-story) component instead.

## Usage

A popover trigger accepts exactly two children: the element which trigger the opening of the popover and the popover content. A trigger can be any component which accepts a `ref` and any other props passed from popover.

### Default

A default popover must have an heading and a content.

<Preview>
    <Story name="default">
        <PopoverTrigger>
            <Button variant="secondary">Trigger</Button>
            <Popover>
                <Heading>WikiSpace</Heading>
                <Content>SpaceX designs, manufactures, and launches the world's most advanced rockets and spacecraft. The company was founded in 2002 by Elon Musk to revolutionize space transportation, with the ultimate goal of making life multiplanetary.</Content>
            </Popover>
        </PopoverTrigger>
    </Story>
</Preview>

### Buttons

A popover can have a single [button](?path=/docs/button--default-story):

<Preview>
    <Story name="button">
        <PopoverTrigger>
            <Button variant="secondary">Trigger</Button>
            <Popover>
                <Heading>WikiSpace</Heading>
                <Content>SpaceX designs, manufactures, and launches the world's most advanced rockets and spacecraft. The company was founded in 2002 by Elon Musk to revolutionize space transportation, with the ultimate goal of making life multiplanetary.</Content>
                <Button variant="primary">Got it</Button>
            </Popover>
        </PopoverTrigger>
    </Story>
</Preview>

Or a [group of button](?path=/docs/button--default-story#button-group):

<Preview>
    <Story name="button group">
        <PopoverTrigger>
            <Button variant="secondary">Trigger</Button>
            <Popover>
                <Heading>WikiSpace</Heading>
                <Content>SpaceX designs, manufactures, and launches the world's most advanced rockets and spacecraft. The company was founded in 2002 by Elon Musk to revolutionize space transportation, with the ultimate goal of making life multiplanetary.</Content>
                <ButtonGroup>
                    <Button variant="secondary">Next</Button>
                    <Button variant="primary">Got it</Button>
                </ButtonGroup>
            </Popover>
        </PopoverTrigger>
    </Story>
</Preview>

### Footer

A popover can have footer text.

<Preview>
    <Story name="footer">
        <PopoverTrigger>
            <Button variant="secondary">Trigger</Button>
            <Popover>
                <Heading>WikiSpace</Heading>
                <Content>SpaceX designs, manufactures, and launches the world's most advanced rockets and spacecraft. The company was founded in 2002 by Elon Musk to revolutionize space transportation, with the ultimate goal of making life multiplanetary.</Content>
                <Button variant="primary">Got it</Button>
                <Footer>All right reserved.</Footer>
            </Popover>
        </PopoverTrigger>
    </Story>
</Preview>

### Position

A popover can open at different positions.

<Preview>
    <Story name="position">
        <PopoverTrigger position="right">
            <Button variant="secondary">Trigger</Button>
            <Popover>
                <Heading>WikiSpace</Heading>
                <Content>SpaceX designs, manufactures, and launches the world's most advanced rockets and spacecraft. The company was founded in 2002 by Elon Musk to revolutionize space transportation, with the ultimate goal of making life multiplanetary.</Content>
            </Popover>
        </PopoverTrigger>
    </Story>
</Preview>

### Popover context

A popover `isOpen` state or `close` function can be retrieved from `usePopoverTriggerContext`.

<Preview filePath="/popover/docs/PopoverContext" />

### Dismissable

By default, a popover will dismiss *on outside interactions* and `esc` keydown. However, in some cases, you might want to force the user to explicitly dismiss the popover with a targeted call to action. This is what the `dismissable` prop is for.

You can set the `dismissable` prop to `false` and render a call to action which will manually dismiss the popover by calling a `close` function retrieved from the `usePopoverTriggerContext` hook.

Inlining the call to `usePopoverTriggerContext` in `PopoverTrigger` will not work.

<Preview filePath="/popover/docs/PopoverCustomClose" />

### Disabled trigger

A popover will not open when it's trigger is disabled.

<Preview>
    <Story name="disabled trigger">
        <PopoverTrigger>
            <Button disabled variant="secondary">Trigger</Button>
            <Popover>
                <Heading>WikiSpace</Heading>
                <Content>SpaceX designs, manufactures, and launches the world's most advanced rockets and spacecraft. The company was founded in 2002 by Elon Musk to revolutionize space transportation, with the ultimate goal of making life multiplanetary.</Content>
            </Popover>
        </PopoverTrigger>
    </Story>
</Preview>

### Controlled

A popover `open` state can be handled in controlled mode.

<Preview filePath="/popover/docs/ControlledPopover" />

## API

### PopoverTrigger

<ComponentInfo
    usage={"import { PopoverTrigger } from \"@sharegate/orbit-ui\";"}
    inherits={[InnerPopoverTrigger.defaultElement, "styled-component"]}
    compact
/>

<ArgsTable of={InnerPopoverTrigger} sort="alpha" />

### Popover

<ComponentInfo
    usage={"import { Popover } from \"@sharegate/orbit-ui\";"}
    slots={["heading", "content", "button", "button-group", "footer"]}
    inherits={[InnerPopover.defaultElement, "styled-component"]}
    compact
/>

<ArgsTable of={InnerPopover} sort="alpha" />

### Heading

<ComponentInfo
    usage={"import { Heading } from \"@sharegate/orbit-ui\";"}
    inherits={[InnerHeading.defaultElement, "styled-component"]}
    compact
/>

<ArgsTable of={InnerHeading} sort="alpha" />

### Content

<ComponentInfo
    usage={"import { Content } from \"@sharegate/orbit-ui\";"}
    inherits={[InnerContent.defaultElement, "styled-component"]}
    compact
/>

<ArgsTable of={InnerContent} sort="alpha" />

