import React, { useState } from 'react';
import { Button, Drawer, Modal, Space, Tooltip } from 'antd';
import OakIcon from '../../icon';
import IconDemo from '../../demo/icon';
import Style from './web.module.less';
export default function render(props) {
    const { placement = 'bottom', style = {} } = props.data;
    const { printCachedStore, printRunningTree } = props.methods;
    const [visible, setVisible] = useState(false);
    const [iconOpen, setIconOpen] = useState(false);
    return (<React.Fragment>
            <Button type="text" shape="circle" icon={<OakIcon name="packup"/>} style={{
            position: 'fixed',
            bottom: 0,
            right: 'calc(100% / 2 - 16px)',
            zIndex: 1999,
            width: 32,
            height: 32,
            ...style,
        }} onClick={() => {
            setVisible(true);
        }}/>
            <Drawer getContainer={false} placement={placement} open={visible} onClose={() => {
            setVisible(false);
        }} title="Debug控制台" footer={<></>} rootClassName={Style.drawer}>
                <Space wrap={true}>
                    <Tooltip title="页面结构">
                        <Button size="large" type="primary" shape="circle" onClick={() => printRunningTree()}>
                            R
                        </Button>
                    </Tooltip>
                    <Tooltip title="页面缓存">
                        <Button size="large" type="primary" shape="circle" onClick={() => printCachedStore()}>
                            C
                        </Button>
                    </Tooltip>
                    <Tooltip title="查看OakIcon">
                        <Button size="large" type="primary" shape="circle" onClick={() => {
            setIconOpen(true);
        }}>
                            Icon
                        </Button>
                    </Tooltip>
                </Space>
            </Drawer>
            <Modal width={window.innerWidth - 100} title="oak-icon" footer={null} open={iconOpen} onCancel={() => {
            setIconOpen(false);
        }} styles={{
            body: {
                height: window.innerHeight - 200,
                overflowY: 'auto',
            },
        }}>
                <IconDemo />
            </Modal>
        </React.Fragment>);
}