/**
 * title: 各种带 Mask 的组件混合使用仍能正确渲染
 * debug: true
 */
import React, { useState } from 'react'

import { Button, Drawer, Modal, Dialog } from 'react-icecream'

export default function Demo() {
  const [visible1, setVisible1] = useState(false)
  const [visible2, setVisible2] = useState(false)
  const [visible3, setVisible3] = useState(false)
  const [visible4, setVisible4] = useState(false)
  const [visible5, setVisible5] = useState(false)
  const [visible6, setVisible6] = useState(false)
  const [visible7, setVisible7] = useState(false)
  return (
    <>
      <Button onClick={() => setVisible1(true)}>打开第一层</Button>
      <Drawer title="抽屉标题 1" visible={visible1} onCancel={() => setVisible1(false)}>
        <Button onClick={() => setVisible2(true)}>打开第 2 - 1 层</Button>
        <Button onClick={() => setVisible3(true)}>打开第 2 - 2 层</Button>
        <Drawer title="抽屉标题 2-1" visible={visible2} onCancel={() => setVisible2(false)}>
          <Button onClick={() => setVisible4(true)}>打开 Modal</Button>
          <Modal title="模态框" visible={visible4} onCancel={() => setVisible4(false)}>
            <Button onClick={() => setVisible5(true)}>打开第 3 层</Button>
            <Drawer title="抽屉标题 3" visible={visible5} onCancel={() => setVisible5(false)}>
              <p>Some contents...</p>
              <p>Some contents...</p>
              <p>Some contents...</p>
              <p>Some contents...</p>
              <p>Some contents...</p>
              <p>Some contents...</p>
              <p>Some contents...</p>
              <p>Some contents...</p>
              <p>Some contents...</p>
              <p>Some contents...</p>
              <p>Some contents...</p>
              <p>Some contents...</p>
              <p>Some contents...</p>
              <p>Some contents...</p>
              <p>Some contents...</p>
              <p>Some contents...</p>
              <p>Some contents...</p>
              <p>Some contents...</p>
            </Drawer>
          </Modal>
        </Drawer>
        <Drawer title="抽屉标题 2-2" visible={visible3} onCancel={() => setVisible3(false)}>
          <Button onClick={() => setVisible6(true)}>打开 Dialog</Button>
          <Dialog visible={visible6} title="对话框" onCancel={() => setVisible6(false)}>
            <Button onClick={() => setVisible7(true)}>打开第 3 层</Button>
            <Drawer title="抽屉标题 3" visible={visible7} onCancel={() => setVisible7(false)}>
              <p>Some contents...</p>
              <p>Some contents...</p>
              <p>Some contents...</p>
              <p>Some contents...</p>
              <p>Some contents...</p>
              <p>Some contents...</p>
              <p>Some contents...</p>
              <p>Some contents...</p>
              <p>Some contents...</p>
              <p>Some contents...</p>
              <p>Some contents...</p>
              <p>Some contents...</p>
              <p>Some contents...</p>
              <p>Some contents...</p>
              <p>Some contents...</p>
              <p>Some contents...</p>
              <p>Some contents...</p>
              <p>Some contents...</p>
            </Drawer>
          </Dialog>
        </Drawer>
      </Drawer>
    </>
  )
}