import Balloon from '..';
import Button from '../../button';
import DatePicker from '../../date-picker';
import React from 'react';
import ReactDOM from 'react-dom';
import Select from '../../select';
import moment from 'moment';

const showSelect = <Button className="btrigger">Show Select</Button>;
const showDatePicker = <Button className="btrigger">Show DatePicker</Button>;
const innerButton = <Button className="btrigger">Show Inner Balloon</Button>;
const dateValue = moment('2018-01-01', 'YYYY-MM-DD', true);

const App = () => (
  <div>
    <Balloon
      autoFocus
      trigger={showSelect}
      closable={false}
      triggerType="click"
    >
      <Select dataSource={[ 'apple', 'banana', 'orange' ]} followTrigger />
    </Balloon>
    <span style={{ marginRight: 20 }} />
    <Balloon
      autoFocus
      trigger={showDatePicker}
      closable={false}
      triggerType="click"
    >
      <DatePicker
        defaultValue={dateValue}
        // @ts-ignore
        followTrigger
      />
    </Balloon>
    <span style={{ marginRight: 20 }} />
    <Balloon
      autoFocus
      trigger={innerButton}
      closable={false}
      triggerType="click"
    >
      <Balloon
        trigger={<Button type="primary">please click</Button>}
        followTrigger
        triggerType="click"
      >
        hello world hello world hello world hello world
      </Balloon>
    </Balloon>
  </div>
);

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