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

const top = (
  <Button id="top" style={{ margin: '5px' }} className="btrigger">
    top
  </Button>
);
const right = (
  <Button id="right" style={{ margin: '5px' }} className="btrigger">
    right
  </Button>
);
const bottom = (
  <Button id="bottom" style={{ margin: '5px' }} className="btrigger">
    bottom
  </Button>
);
const left = (
  <Button id="left" style={{ margin: '5px' }} className="btrigger">
    left
  </Button>
);
const topLeft = (
  <Button id="topLeft" style={{ margin: '5px' }} className="btrigger">
    top left
  </Button>
);
const topRight = (
  <Button id="topRight" style={{ margin: '5px' }} className="btrigger">
    top right
  </Button>
);
const rightTop = (
  <Button id="rightTop" style={{ margin: '5px' }} className="btrigger">
    right top
  </Button>
);
const rightBottom = (
  <Button id="rightBottom" style={{ margin: '5px' }} className="btrigger">
    right bottom
  </Button>
);
const bottomLeft = (
  <Button id="bottomLeft" style={{ margin: '5px' }} className="btrigger">
    bottom left
  </Button>
);
const bottomRight = (
  <Button id="bottomRight" style={{ margin: '5px' }} className="btrigger">
    bottom right
  </Button>
);
const leftTop = (
  <Button id="leftTop" style={{ margin: '5px' }} className="btrigger">
    left top
  </Button>
);
const leftBottom = (
  <Button id="leftBottom" style={{ margin: '5px' }} className="btrigger">
    left bottom
  </Button>
);

const App = () => (
  <div style={{ paddingLeft: 320 }}>
    <div style={{ marginLeft: 75 }}>
      <Balloon
        needAdjust
        title="balloon title"
        trigger={topLeft}
        align="tl"
        alignEdge
        triggerType="click"
        type="dark"
        style={{ width: 300 }}
      >
        balloon content
      </Balloon>
      <Balloon
        needAdjust
        title="balloon title"
        trigger={top}
        align="t"
        alignEdge
        type="dark"
        triggerType="click"
        style={{ width: 300 }}
      >
        balloon content
      </Balloon>
      <Balloon
        needAdjust
        trigger={topRight}
        title="balloon title"
        align="tr"
        type="dark"
        alignEdge
        triggerType="click"
        style={{ width: 300 }}
      >
        balloon content
      </Balloon>
    </div>
    <div style={{ width: 80, float: 'left' }}>
      <Balloon
        needAdjust
        title="balloon title"
        trigger={leftTop}
        align="lt"
        type="dark"
        alignEdge
        triggerType="click"
        style={{ width: 300 }}
      >
        balloon content
      </Balloon>
      <Balloon
        needAdjust
        trigger={left}
        title="balloon title"
        align="l"
        type="dark"
        alignEdge
        triggerType="click"
        style={{ width: 300 }}
      >
        balloon content
      </Balloon>
      <Balloon
        needAdjust
        trigger={leftBottom}
        title="balloon title"
        align="lb"
        alignEdge
        type="dark"
        triggerType="click"
        style={{ width: 300 }}
      >
        balloon content
      </Balloon>
    </div>
    <div style={{ width: 80, marginLeft: 290 }}>
      <Balloon
        needAdjust
        trigger={rightTop}
        title="balloon title"
        align="rt"
        alignEdge
        type="dark"
        triggerType="click"
        style={{ width: 300 }}
      >
        balloon content
      </Balloon>
      <Balloon
        needAdjust
        trigger={right}
        title="balloon title"
        align="r"
        alignEdge
        type="dark"
        triggerType="click"
        style={{ width: 300 }}
      >
        balloon content
      </Balloon>
      <Balloon
        needAdjust
        title="balloon title"
        trigger={rightBottom}
        align="rb"
        alignEdge
        type="dark"
        triggerType="click"
        style={{ width: 300 }}
      >
        balloon content
      </Balloon>
    </div>
    <div style={{ marginLeft: 80, clear: 'both' }}>
      <Balloon
        needAdjust
        trigger={bottomLeft}
        title="balloon title"
        align="bl"
        type="dark"
        alignEdge
        triggerType="click"
        style={{ width: 300 }}
      >
        balloon content
      </Balloon>
      <Balloon
        needAdjust
        trigger={bottom}
        title="balloon title"
        align="b"
        alignEdge
        type="dark"
        triggerType="click"
        style={{ width: 300 }}
      >
        balloon content
      </Balloon>
      <Balloon
        needAdjust
        type="dark"
        trigger={bottomRight}
        title="balloon title"
        align="br"
        alignEdge
        triggerType="click"
        style={{ width: 300 }}
      >
        balloon content
      </Balloon>
    </div>
  </div>
);

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