import { Meta, Canvas, ArgsTable, Story } from "@storybook/blocks";
import { ComponentHeading } from "../../storybook-components";
import { Reference } from "../Reference";
import { Text } from "../Text";
import { Flex } from "../Flex";
import { Heading } from "../Heading";
import { Input } from "../Input";
import { Icon, ICON_TYPE } from "../Icon";
import { Box } from "../Box";
import { Popover } from "./Popover";

<Meta title="Components/Popovers/Popover" component={Popover} />

<ComponentHeading
  componentName="Popover"
  description="Creates a generic popover positioned on a given reference element"
  sourcePath="src/components/Popover/Popover.tsx"
/>

## Installation

```jsx
import { Popover } from "@conveyorhq/arrow-ds";
```

## Basic usage

<Canvas>
  <Story name="Popover">
    <Box className="min-h-24">
      <Popover
        placement="bottom-start"
        referenceElement={<Reference>A.9.4.1</Reference>}
        isVisible
      >
        <Text as="span" className="text-bodySm font-medium text-gray-700">
          Requirement
        </Text>
        <Flex className="items-center mt-1">
          <Heading.H4>ISO 27001:2013</Heading.H4>
          <Icon
            icon={ICON_TYPE.CHEVRON_RIGHT}
            className="text-gray-600 text-iconSm mx-1"
          />
          <Heading.H4>A.9.4.1 - Information Access Restriction</Heading.H4>
        </Flex>
      </Popover>
    </Box>
  </Story>
</Canvas>

## API

<ArgsTable of={Popover} />

## Demos

### Changing the color

The default background color of the popover is `white`. To change the color of the popover and the arrow, use the `color` prop.

If `showArrow=false`, then you can use the `className` prop to pass a `bg-*` classname to change the background color.

<Canvas>
  <Story name="Popover color with arrow">
    <Popover
      color="#76baf9"
      placement="bottom"
      referenceElement={<Box>Popover color</Box>}
      showArrow
      isVisible
    >
      This field is required
    </Popover>
  </Story>
</Canvas>

### With Arrow

<Canvas>
  <Story name="Popover with arrow">
    <Popover
      placement="right"
      referenceElement={<Input className="w-40" type="text" />}
      showArrow
      isVisible
    >
      This field is required
    </Popover>
  </Story>
</Canvas>

### Inline

<Canvas>
  <Story name="Popover Inline">
    <Popover placement="top" inline>
      Error: something went wrong
    </Popover>
  </Story>
</Canvas>