import * as React from 'react';
import Button from '../../components/button';
import Input from '../../components/input';
import FontIcon from '../../components/font_icon';
import Tooltip, { tooltipFactory } from '../../components/tooltip';
import Chip from '../../components/chip';
import Avatar from '../../components/avatar';

const TooltipFontIcon = tooltipFactory({ passthrough: false })(FontIcon);
const TooltipButton = Tooltip(Button);
const TooltipInput = Tooltip(Input);
const TooltipStrong = Tooltip(({ children, ...other }) => {
  delete other.theme;
  return <strong {...other}>{children}</strong>;
});
const TooltipStrongDirect = Tooltip('strong');
const ChipTooltip = Tooltip(Chip);

const TooltipTest = () => (
  <section>
    <h5>Tooltip</h5>
    <p>Give information on :hover</p>
    <TooltipButton label="Bookmark" icon="bookmark" raised primary tooltip="Bookmark Tooltip" tooltipDelay={1000} />
    <TooltipButton icon="add" floating accent tooltip="Floating Tooltip" />
    <TooltipButton icon="add" floating disabled tooltip="Floating can not be shown" />
    <TooltipButton
      icon="add"
      floating
      tooltip={<div><p>An example with</p><p>Multiline!</p></div>}
    />
    <ChipTooltip tooltip="Dolor sit amet" tooltipPosition="top">
      <Avatar icon="home" />
      <span>Tooltip in a chip</span>
    </ChipTooltip>
    <TooltipInput tooltip="lorem ipsum..." />
    <p>Lorem ipsum dolor sit amet, <TooltipStrong tooltip="This is a auto show tooltip">consectetur</TooltipStrong> adipiscing elit.</p>
    <p>
      Click this next word to show and hide on click:
      {' '}
      <TooltipStrongDirect tooltip="This is a auto show tooltip" tooltipShowOnClick>
        oh hai
      </TooltipStrongDirect>
      {' '}. This is useful for mobile!
    </p>
    <TooltipFontIcon value="code" tooltip="This is a test with FontIcon" />
  </section>
);

export default TooltipTest;