import Balloon from '..';
import Button from '../../button';
import Input from '../../input';
import React from 'react';
import ReactDOM from 'react-dom';

const content = (<div><p>content</p></div>);
const MoveTarget = <Button style={{ margin: '5px' }}>hover</Button>;
const ClickTarget = <Button style={{ margin: '5px' }}>click</Button>;
const FocusTarget = <Button style={{ margin: '5px' }}>focus</Button>;

const HoverInputTarget = <Input placeholder="hover" style={{ marginRight: '20px' }}/>;
const ClickInputTarget = <Input placeholder="click" style={{ marginRight: '20px' }}/>;
const FocusInputTarget = <Input placeholder="focus" />;

const App = () => (
  <div>
    <Balloon trigger={MoveTarget} triggerType="click">
      {content}
    </Balloon>

    <Balloon trigger={ClickTarget} triggerType="click" closable={true}>
      {content}
    </Balloon>

    <Balloon trigger={FocusTarget} triggerType="focus">
      {content}
    </Balloon>

    <br/>
    <br/>

    <Balloon trigger={HoverInputTarget} triggerType="hover">
      {content}
    </Balloon>
    <Balloon trigger={ClickInputTarget} triggerType="click">
      {content}
    </Balloon>
    <Balloon trigger={FocusInputTarget} triggerType="focus">
      {content}
    </Balloon>
  </div>
);

ReactDOM.render(<App />, document.getElementById('balloon-demo-6'));