import type { LinkButtonProps } from '@/components/LinkButton'
import LinkButton from '@/components/LinkButton'
import { Alignment, Navbar } from '@blueprintjs/core'
import { css } from '@emotion/css'
import useAuthIdentity from '@inject/graphql/auth'
import InjectSvg from '@inject/shared/svg/inject-logo--horizontal-black.svg?react'

import { ColorModeMini } from '@/clientsettings/components/ColorMode'
import type { FC, PropsWithChildren } from 'react'
import { useMemo } from 'react'
import UserTitle from './UserTitle'

const wrapper = css`
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
`

const outlet = css`
  flex: 1;
  overflow: auto;
`

const NavbarUi: FC<PropsWithChildren> = ({ children }) => {
  const { whoAmI } = useAuthIdentity()

  const links = useMemo<LinkButtonProps[]>(
    () => [
      {
        link: ['/'],
        button: {
          icon: 'home',
          text: 'Home',
          title: 'Home',
          minimal: true,
        },
        end: true,
        disableActive: true,
      },
    ],
    []
  )

  return (
    <div className={wrapper}>
      <Navbar
        className={css`
          position: sticky;
          top: 0;
          left: 0;
          right: 0;
        `}
      >
        <Navbar.Group align={Alignment.LEFT}>
          <InjectSvg
            style={{ width: '6rem', height: 'calc(6rem / ( 1555 / 418 ))' }}
          />
          <Navbar.Divider />
          {links.map(child => (
            <LinkButton key={child.link?.[0].toString()} {...child} />
          ))}
          <div
            id='portalNavbar'
            style={{
              width: 'max-content',
              display: 'flex',
              alignItems: 'center',
            }}
          />
        </Navbar.Group>
        <Navbar.Group align={Alignment.RIGHT}>
          <Navbar.Divider />
          <ColorModeMini />
          {whoAmI?.username && <UserTitle />}
        </Navbar.Group>
      </Navbar>
      <div className={outlet}>{children}</div>
    </div>
  )
}

export default NavbarUi
