import { Layout, Playground, Attributes } from 'lib/components'
import { Tooltip, Spacer, Row, Col, Button, Link, Badge, Code, Text } from 'components'

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

## Tooltip

Displays additional information on hover.

<Playground
  desc="Basic usage."
  scope={{ Tooltip }}
  code={`
<Tooltip text={'Push to Git and your website is live.'}>Tooltip</Tooltip>
`} />

<Playground
  title="Trigger"
  desc="Trigger by click."
  scope={{ Tooltip }}
  code={`
<Tooltip text={'Push to Git and your website is live.'} trigger="click" type="dark">
  <span>Click me</span>
</Tooltip>
`} />

<Playground
  title="With Components"
  desc="Combined with different components."
  scope={{ Tooltip, Button, Link, Spacer, Row, Badge }}
  code={`
<Row align="middle">
  <Tooltip text={'Push to Git and your website is live.'} type="dark">
    <Button auto size="small">Button</Button>
  </Tooltip>
  <Spacer inline x={1} />
  <Tooltip text={'Push to Git and your website is live.'} type="dark">
    <Badge>1000+</Badge>
  </Tooltip>
  <Spacer inline x={1} />
  <Tooltip text={'Push to Git and your website is live.'} type="dark">
    <Link href="#" color>Hyperlink</Link>
  </Tooltip>
</Row>
`} />

<Playground
  title="Custom Content"
  desc="You can customize the pop-up content."
  scope={{ Tooltip, Spacer, Row, Code, Text }}
  code={`
<Row align="middle">
  <Tooltip text={<>Perfect for working with a <Code>CMS</Code>.</>}>
    <span>Top</span>
  </Tooltip>
  <Spacer inline x={2.5} />
  <Tooltip text={<><Text b>Perfect</Text> for working with a CMS.</>} placement="bottom">
    <span>Bottom</span>
  </Tooltip>
</Row>
`} />

<Playground
  title="Types"
  desc="Different state."
  scope={{ Tooltip, Spacer, Row, Code, Text }}
  code={`
<Row align="middle">
  <Tooltip text="Perfect for working with a CMS." type="dark">
    <span>Dark</span>
  </Tooltip>
  <Spacer inline x={1.5} />
  <Tooltip text="Perfect for working with a CMS." type="success">
    <span>Success</span>
  </Tooltip>
  <Spacer inline x={1.5} />
  <Tooltip text="Perfect for working with a CMS." type="warning">
    <span>Warning</span>
  </Tooltip>
  <Spacer inline x={1.5} />
  <Tooltip text="Perfect for working with a CMS." type="error">
    <span>Error</span>
  </Tooltip>
  <Spacer inline x={1.5} />
  <Tooltip text="Perfect for working with a CMS." type="secondary">
    <span>Secondary</span>
  </Tooltip>
</Row>
`} />

<Playground
  title="Variant"
  desc="Special styles."
  scope={{ Tooltip, Spacer, Row, Code, Text }}
  code={`
<Row align="middle">
  <Tooltip text="Push to Git and your website is live." type="lite">
    <span>Lite</span>
  </Tooltip>
  <Spacer inline x={2.5} />
  <Tooltip text="Push to Git and your website is live." hideArrow>
    <span>No Arrow</span>
  </Tooltip>
</Row>
`} />

<Playground
  title="Placements"
  desc="There are 12 `placement` options available."
  scope={{ Tooltip, Spacer, Row, Col }}
  code={`
() => {
  const text = 'The Evil Rabbit Jumped over the Fence'
  const Center = ({ children, ...props }) => (
    <Col style={{ display: 'flex', justifyContent: 'center' }} {...props}>{children}</Col>
  )
  return (
    <div style={{ width: '80%', margin: '0 auto' }}>
      <Row justify="center">
        <Center span={5}>
          <Tooltip text={text} placement="topStart" type="dark">topStart</Tooltip>
        </Center>
        <Center span={5}>
          <Tooltip text={text} placement="top" type="dark">top</Tooltip>
        </Center>
        <Center span={5}>
          <Tooltip text={text} placement="topEnd" type="dark">topEnd</Tooltip>
        </Center>
      </Row>
      <Row justify="space-between">
        <Center span={5}>
          <Tooltip text={text} placement="leftStart" type="dark">leftStart</Tooltip>
        </Center>
        <Center span={5}>
          <Tooltip text={text} placement="rightStart" type="dark">rightStart</Tooltip>
        </Center>
      </Row>
      <Spacer y={.5} />
      <Row justify="space-between">
        <Center span={5}>
          <Tooltip text={text} placement="left" type="dark">left</Tooltip>
        </Center>
        <Center span={5}>
          <Tooltip text={text} placement="right" type="dark">right</Tooltip>
        </Center>
      </Row>
      <Spacer y={.5} />
      <Row justify="space-between">
        <Center span={5}>
          <Tooltip text={text} placement="leftEnd" type="dark">leftEnd</Tooltip>
        </Center>
        <Center span={5}>
          <Tooltip text={text} placement="rightEnd" type="dark">rightEnd</Tooltip>
        </Center>
      </Row>
      <Row justify="center">
        <Center span={5}>
          <Tooltip text={text} placement="bottomStart" type="dark">bottomStart</Tooltip>
        </Center>
        <Center span={5}>
          <Tooltip text={text} placement="bottom" type="dark">bottom</Tooltip>
        </Center>
        <Center span={5}>
          <Tooltip text={text} placement="bottomEnd" type="dark">bottomEnd</Tooltip>
        </Center>
      </Row>
    </div>
  )
}
`} />

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

| Attribute | Description | Type | Accepted values | Default
| ---------- | ---------- | ---- |  -------------- | ------ |
| **text** | text of pop-up | `string` `React.ReactNode` | - | - |
| **visible** | visible or not | `boolean` | - | `false` |
| **initialVisible** | visible on initial | `boolean` | - | `false` |
| **hideArrow** | hide arrow icon | `boolean` | - | `false` |
| **type** | preset style type | [TooltipTypes](#tooltiptypes) | - | `default` |
| **placement** | position of the tooltip relative to the target | [Placement](#placement) | - | `top` |
| **trigger** | tooltip trigger mode | `'click' / 'hover'` | - | `hover` |
| **enterDelay**(ms) | delay before tooltip is shown | `number` | - | `100` |
| **leaveDelay**(ms) | delay before tooltip 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 tooltip is changed | `(visible: boolean) => void` | - | - |
| ... | native props | `HTMLAttributes` | `'id', 'name', 'className', ...` | - |

<Attributes.Title>TooltipTypes</Attributes.Title>

```ts
type TooltipTypes = 'default'
  | 'secondary'
  | 'success'
  | 'warning'
  | 'error'
  | 'dark'
  | 'lite'
```

<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>
