import { Layout, Playground, Attributes } from 'lib/components'
import { Popover, Spacer, Link } from 'components'
import { useState } from 'react'

export const meta = {
  title: 'Popover',
  group: 'Data Display',
}

## Popover

The floating box popped by clicking or hovering.

<Playground
  scope={{ Popover, Spacer, Link }}
  code={`
() => {
  const content = () => (
    <div style={{ padding: '0 10px' }}>
      <Link href="#">A hyperlink</Link>
      <Spacer h={.5} />
      <Link color href="#">External link</Link>
    </div>
  )
  return (
    <Popover content={content}>
      Menu
    </Popover>
  )
}
`}
/>

<Playground
  title="Preset Item"
  desc="Use preset `Item` component build layout."
  scope={{ Popover, Spacer, Link }}
  code={`
() => {
  const content = () => (
    <>
      <Popover.Item title>
        <span>User Settings</span>
      </Popover.Item>
      <Popover.Item>
        <Link href="#">A hyperlink</Link>
      </Popover.Item>
      <Popover.Item>
        <Link color href="#">A hyperlink for edit profile</Link>
      </Popover.Item>
      <Popover.Item line />
      <Popover.Item>
        <span>Command-Line</span>
      </Popover.Item>
    </>
  )
  return (
    <Popover content={content}>
      Menu
    </Popover>
  )
}
`}
/>

<Playground
  title="Close Manual"
  desc="You can control when to close the pop-up box."
  scope={{ Popover, Spacer, Link, useState }}
  code={`
() => {
  const [visible, setVisible] = useState(false)
  const changeHandler = (next) => {
    setVisible(next)
  }
  const content = () => (
    <div style={{ padding: '0 10px' }}>
      <span onClick={() => setVisible(false)}>Click to close</span>
      <Spacer h={.5} />
      <span>Nothing</span>
    </div>
  )
  return (
    <Popover content={content} visible={visible}
      onVisibleChange={changeHandler}>
      Menu
    </Popover>
  )
}
`}
/>

<Attributes edit="/pages/en-us/components/popover.mdx">
<Attributes.Title>Popover.Props</Attributes.Title>

| Attribute                 | Description                                    | Type                          | Accepted values     | Default  |
| ------------------------- | ---------------------------------------------- | ----------------------------- | ------------------- | -------- |
| **content**               | content of pop-up                              | `ReactNode` `() => ReactNode` | -                   | -        |
| **visible**               | visible or not                                 | `boolean`                     | -                   | `false`  |
| **initialVisible**        | visible on initial                             | `boolean`                     | -                   | `false`  |
| **hideArrow**             | hide arrow icon                                | `boolean`                     | -                   | `false`  |
| **placement**             | position of the popover relative to the target | [Placement](#placement)       | -                   | `bottom` |
| **trigger**               | tooltip trigger mode                           | `'click' / 'hover'`           | -                   | `click`  |
| **enterDelay**(ms)        | delay before popover is shown                  | `number`                      | -                   | `100`    |
| **leaveDelay**(ms)        | delay before popover is hidden                 | `number`                      | -                   | `0`      |
| **offset**(px)            | distance between pop-up and target             | `number`                      | -                   | `12`     |
| **portalClassName**       | className of pop-up box                        | `string`                      | -                   | -        |
| **onVisibleChange**       | call when visibility of the popover is changed | `(visible: boolean) => void`  | -                   | -        |
| **disableItemsAutoClose** | prevent close Popover when Items clicked       | `boolean`                     | -                   | -        |
| ...                       | native props                                   | `HTMLAttributes`              | `'id', 'name', ...` | -        |

<Attributes.Title alias="Popover.Option">Popover.Item</Attributes.Title>

| Attribute            | Description                        | Type      | Accepted values | Default |
| -------------------- | ---------------------------------- | --------- | --------------- | ------- |
| **line**             | show a line                        | `boolean` | -               | `false` |
| **title**            | show text with title style         | `boolean` | -               | `false` |
| **disableAutoClose** | prevent close Popover when clicked | `boolean` | -               | `false` |

<Attributes.Title>Placement</Attributes.Title>

```ts
type Placement = 'top'
  | 'topStart',
  | 'topEnd',
  | 'left',
  | 'leftStart',
  | 'leftEnd',
  | 'bottom',
  | 'bottomStart',
  | 'bottomEnd',
  | 'right',
  | 'rightStart',
  | 'rightEnd',
```

</Attributes>

export default ({ children }) => <Layout meta={meta}>{children}</Layout>
