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

const ToolbarPortal = () => {
  const { exerciseId } = useParams('/instructor/:exerciseId/:teamId')
  const [open, setOpen] = useState(false)

  const portalRef = document.getElementById('toolPanel')
  const toolbarRef = document.getElementById('topnavPortal')
  return (
    <>
      {portalRef &&
        open &&
        createPortal(<Toolbar exerciseId={exerciseId} />, portalRef)}
      {toolbarRef &&
        createPortal(
          <Button
            minimal
            onClick={() => setOpen(prev => !prev)}
            icon='info-sign'
          >
            Hints
          </Button>,
          toolbarRef
        )}
    </>
  )
}

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

export default Layout
