/**
 * title: Tooltip 会 render 在 Drawer 里面
 * debug: true
 */
import React, { useState } from 'react'

import { Button, Drawer, Tooltip, useDrawerFooterCtx } from 'react-icecream'
import { HelpIcon } from 'react-icecream/icons'

export default function Demo() {
  const [visible, setVisible] = useState(false)
  const title = (
    <div style={{ display: 'flex', alignItems: 'center' }}>
      Tooltip 能正确展示
      <Tooltip title="tooltip content"><HelpIcon /></Tooltip>
    </div>
  )
  const footer = <MyFooter />
  return (
    <>
      <Button onClick={() => setVisible(true)}>打开</Button>
      <Drawer title={title} footer={footer} visible={visible} onCancel={() => setVisible(false)}>
        <Tooltip title="tooltip content"><span>hover me.</span></Tooltip>
      </Drawer>
    </>
  )
}

function MyFooter() {
  const { onOk } = useDrawerFooterCtx()
  return (
    <div style={{ width: '100%', paddingTop: '12px', borderTop: '1px solid #E5E5E5', textAlign: 'left' }}>
      <Tooltip title="tooltip content"><Button type="primary" onClick={onOk}>好的，我知道了</Button></Tooltip>
    </div>
  )
}