import { isDev } from '@/constants'
import { AuthTab } from '@/layouts/components/auth-tab'
import { MenuTab } from '@/layouts/components/menu-tab'
import { useModel } from '@@/plugin-model/useModel'
import { ToolOutlined } from '@ant-design/icons'
import { useDrawer } from '@genting/hooks'
import { Button, Drawer, Tabs } from 'antd'
import { memo, useState } from 'react'

export const DevTool = memo(() => {
  const masterState = useModel('@@qiankunStateFromMaster'),
    { openDrawer, drawerProps, closeDrawer } = useDrawer(),
    [activeKey, setActiveKey] = useState('menu')

  return isDev && !masterState ? (
    <div style={{ position: 'fixed', bottom: 100, right: 10, zIndex: 101 }}>
      <Button
        type="primary"
        size="large"
        shape="circle"
        icon={<ToolOutlined style={{ fontSize: 18 }} />}
        onClick={() => openDrawer()}
      />
      <Drawer
        {...drawerProps}
        onClose={closeDrawer}
        bodyStyle={{ paddingLeft: 0 }}
        width={500}
      >
        <Tabs
          tabPosition="left"
          activeKey={activeKey}
          onChange={setActiveKey}
          style={{ height: '100%' }}
          items={[
            {
              key: 'menu',
              label: '菜单',
              children: <MenuTab />,
            },
            {
              key: 'auth',
              label: '权限',
              children: <AuthTab />,
            },
          ]}
        />
      </Drawer>
    </div>
  ) : null
})