import React, { useState } from "react";
import { Button, Drawer, Segment, Form, Switch } from "@tencent/tea-component";

export default function DrawerExample() {
  const [size, setSize] = useState("m");
  const [placement, setPlacement] = useState("right");
  const [disableAnimation, setDisableAnimation] = useState(false);
  const [disableOuterClick, setDisableOuterClick] = useState(false);
  const [showMask, setShowMask] = useState(false);

  const [visible, setVisible] = useState(false);

  return (
    <>
      <Form>
        <Form.Item label="size">
          <Segment
            value={size}
            onChange={size => setSize(size)}
            options={[{ value: "m" }, { value: "l" }]}
          />
        </Form.Item>
        <Form.Item label="placement">
          <Segment
            value={placement}
            onChange={placement => setPlacement(placement)}
            options={[{ value: "left" }, { value: "right" }]}
          />
        </Form.Item>
        <Form.Item label="禁用动效">
          <Switch
            value={disableAnimation}
            onChange={disableAnimation => setDisableAnimation(disableAnimation)}
          />
        </Form.Item>
        <Form.Item label="禁用点击外部区域关闭">
          <Switch
            value={disableOuterClick}
            onChange={disableOuterClick =>
              setDisableOuterClick(disableOuterClick)
            }
          />
        </Form.Item>
        <Form.Item label="是否显示遮罩">
          <Switch
            value={showMask}
            onChange={showMask => setShowMask(showMask)}
          />
        </Form.Item>
      </Form>
      <Form.Action>
        <Button
          type="primary"
          style={{ margin: 32 }}
          onClick={() => setVisible(true)}
        >
          展开
        </Button>
      </Form.Action>

      <Drawer
        // @ts-ignore
        size={size}
        // @ts-ignore
        placement={placement}
        disableAnimation={disableAnimation}
        outerClickClosable={!disableOuterClick}
        showMask={showMask}
        visible={visible}
        title="标题"
        subtitle="说明文字"
        footer={<Button type="primary">操作按钮</Button>}
        onClose={() => setVisible(false)}
      >
        <p style={{ padding: "20px 0" }}>
          可以根据实际需求，选则是否需要头尾结构
        </p>
        <img
          src="http://ue.qzone.qq.com/200x400"
          style={{ width: "100%", verticalAlign: "top" }}
          alt=""
        />
      </Drawer>
    </>
  );
}