import React, { useState } from 'react';
import { Button, Row, Drawer, Radio } 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 [position, setPosition] = useState('right');
  const selectPosition = ({ target: { value } }: any) => {
    setPosition(value);
  };

  const [type, setType] = useState('overlay');
  const selectType = ({ target: { value } }: any) => {
    setType(value);
  };
  return (
    <div className="inline" style={{ padding: 0 }}>
      <div
        className={classNames('inline', {
          [`inline--${position}`]: show && type === 'push',
        })}
      >
        <Row>
          <Radio.Group defaultValue="right" onChange={selectPosition}>
            <Radio.Button value="left">左侧</Radio.Button>
            <Radio.Button value="right">右侧</Radio.Button>
            <Radio.Button value="top">上方</Radio.Button>
            <Radio.Button value="bottom">下方</Radio.Button>
          </Radio.Group>
        </Row>
        <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}
        placement={position}
        footer={true}
        title="抽屉标题"
        visible={show}
        onClose={toClose}
      >
        <p className="content">抽屉的内容</p>
      </Drawer>
    </div>
  );
};