import GitVersion from '@/components/GitVersion'
import LinkButton from '@/components/LinkButton'
import DefinitionManager from '@/exercisepanel/DefinitionManager'
import ExerciseManager from '@/exercisepanel/ExerciseManager'
import ExportImport from '@/exercisepanel/ExportImport'
import usePrependNavbar from '@/views/Navbar/usePrependNavbar'
import { css } from '@emotion/css'
import useAuthIdentity from '@inject/graphql/auth'

const limitedHeight = css`
  max-height: 70vh;
  overflow-y: auto;
`

const noMargin = css`
  margin: 0;
`

const ExercisePanel = () => {
  const { isSuperuser } = useAuthIdentity()
  const element = usePrependNavbar(
    <LinkButton
      link={['/users']}
      button={{ text: 'Users', icon: 'people', minimal: true }}
    />
  )

  return (
    <>
      {element}
      <h1 className={noMargin}>Exercise panel</h1>
      <DefinitionManager className={limitedHeight} />
      <ExerciseManager className={limitedHeight} />
      {isSuperuser && <ExportImport />}
      <GitVersion />
    </>
  )
}

export default ExercisePanel
