import Toolbar from '@/components/Toolbar'
import { useParams } from '@/router'
import useRightBar from '@/views/InstructorView/useRightNavbar'
import { Button } from '@blueprintjs/core'
import { useState } from 'react'
import { createPortal } from 'react-dom'
import { Outlet } from 'react-router-dom'

const ToolbarPortal = () => {
  const { teamId } = useParams('/instructor/:exerciseId/:teamId')
  const [open, setOpen] = useState(false)
  const element = useRightBar(
    <Button minimal onClick={() => setOpen(prev => !prev)} icon='info-sign'>
      {`${open ? 'Close' : 'Open'} tools`}
    </Button>
  )

  const toolPanel = document.getElementById('toolPanel')

  return (
    <>
      {toolPanel &&
        open &&
        createPortal(
          <Toolbar
            teamId={teamId}
            disabled
            disabledTitle='Using tools is not allowed in instructor view'
            onClose={() => setOpen(false)}
          />,
          toolPanel
        )}
      {element}
    </>
  )
}

const Layout = () => (
  <>
    <Outlet />
    <ToolbarPortal />
  </>
)

export default Layout
