import React, { useState } from 'react';
import { Radio, Button, Row, Drawer } from '@btri-ui/base';
import './index.less';
import classNames from 'classnames';

export default () => {
  const [show, setShow] = useState(false);
  const toShow = () => setShow(true);
  const toClose = () => setShow(false);

  const [type, setType] = useState('overlay');
  const selectType = ({ target: { value } }: any) => {
    setType(value);
  };
  const types = [
    { label: 'Overlay', value: 'overlay' },
    { label: 'Push', value: 'push' },
  ];
  return (
    <div className="inline" style={{ padding: 0 }}>
      <div
        className={classNames('inline', {
          'inline--right': show && type === 'push',
        })}
      >
        <Row style={{ paddingTop: '16px' }}>
          <Radio.Group defaultValue="overlay" onChange={selectType}>
            <Radio.Button value="overlay">Overlay</Radio.Button>
            <Radio.Button value="push">Push</Radio.Button>
          </Radio.Group>
        </Row>
        <Row style={{ paddingTop: '16px' }}>
          <Button onClick={toShow}>打开抽屉</Button>
        </Row>
      </div>
      <Drawer
        style={{ position: 'absolute' }}
        getContainer={false}
        title="抽屉标题"
        visible={show}
        footer={true}
        onClose={toClose}
      >
        <p className="content">抽屉的内容</p>
      </Drawer>
    </div>
  );
};