import { Button, Modal, App, Space } from "antd"
import { useState } from "react"
import ConfigProvider from "antd/es/config-provider"
import type { ReactNode } from "react"
import type { PlasmoGetShadowHostId } from "plasmo"
import { StyleProvider } from "@ant-design/cssinjs"
import { message, Popconfirm, Drawer } from 'antd';
export const getShadowHostId: PlasmoGetShadowHostId = () =>plasmo-shadow-container
export const ThemeProvider = ({ children = null as ReactNode }) => (
<ConfigProvider
getPopupContainer={() => document.getElementById("plasmo-shadow-container")?.shadowRoot as any}
>
{children}
</ConfigProvider>
)
function PlasmoOverlay({ children }) {
const [open, setOpen] = useState(false);
console.log('HEYY: ', document.getElementById("plasmo-shadow-container")?.shadowRoot)
const showDrawer = () => {
setOpen(true);
};
const onClose = () => {
setOpen(false);
};
return (
<ThemeProvider>
<StyleProvider container={document.getElementById("plasmo-shadow-container").shadowRoot}>
<Button type="primary" onClick={showDrawer}>
Open
</Button>
<Drawer mask={false} title="Basic Drawer" placement="right" onClose={onClose} open={open}>
<p>Some contents...</p>
<p>Some contents...</p>
<p>Some contents...</p>
</Drawer>
</StyleProvider>
{children}
</ThemeProvider>
)
}
export default PlasmoOverlay