import React, { useState } from 'react';
import { Col, Modal, Button, Row } from '@btri-ui/base';

export default () => {
  const [show, setShow] = useState(false);
  const [show2, setShow2] = useState(false);
  const [show3, setShow3] = useState(false);

  const toShow = () => setShow(true);
  const toClose = () => setShow(false);

  const toShow2 = () => setShow2(true);
  const toClose2 = () => setShow2(false);

  const toShow3 = () => setShow3(true);
  const toClose3 = () => setShow3(false);

  const label =
    '默认宽度的对话框，文本内容最多不超过2行，超过2行使用最大宽度对话框。内容较少，使用小宽度的对话框。';

  return (
    <>
      <Row automode>
        <Col span={6}>
          <Button type="primary" onClick={toShow}>
            自定义 top
          </Button>
        </Col>
        <Col span={6}>
          <Button type="primary" onClick={toShow2}>
            默认位置
          </Button>
        </Col>
        <Col span={6}>
          <Button type="primary" onClick={toShow3}>
            垂直居中
          </Button>
        </Col>
      </Row>
      <Modal
        style={{ top: '20px' }}
        title="自定义 Top"
        visible={show}
        onOk={toClose}
        onCancel={toClose}
      >
        {label}
      </Modal>
      <Modal
        title="默认位置"
        visible={show2}
        onOk={toClose2}
        onCancel={toClose2}
      >
        <p>{label}</p>
      </Modal>
      <Modal
        centered
        title="垂直居中"
        visible={show3}
        onOk={toClose3}
        onCancel={toClose3}
      >
        <p>{label}</p>
      </Modal>
    </>
  );
};