import Box from '../box'
import { RenderOnScreen, useDown, vui } from '../core'
import { cs, isJsx } from '../utils'
import Header from './header'
import { LoggedOutHeaderProps } from './header.types'

/** Displays Header content appropriate for logged out users, such as sign in button or create account prompt. */
export const LoggedOutHeader = vui<'div', LoggedOutHeaderProps>((props, ref) => {
  const {
    applicationName,
    applicationUrl,
    children,
    className,
    isApplication = false,
    createAccount,
    logo,
    mainLinks,
    signIn,
    ...rest
  } = props

  if (isApplication) {
    if (!applicationName) {
      console.error('Header: isApplication is true but applicationName is not set.')
    }
  }

  const isSmallScreen = useDown('md')
  const isLessThanMD = useDown('sm')

  const localTextColor = rest?.variant === 'dark' ? 'white' : 'darkBlue.main'

  return (
    <Header
      className={cs('vui-loggedOutHeader', isApplication ? 'vui-loggedOutAppHeader' : undefined, className)}
      mb={isApplication && isSmallScreen ? '41px' : 'inherited'}
      ref={ref}
      {...rest}
    >
      <Header.Content>
        {(!isApplication || !isLessThanMD) && <> {isJsx(logo) ? logo : <Header.Logo {...logo} />}</>}
        {isApplication && (
          <>
            <RenderOnScreen minWidth="sm">
              <Header.Divider mr={2} />
            </RenderOnScreen>
            <Header.ApplicationName color={localTextColor} title={applicationName} url={applicationUrl || '/'} />
          </>
        )}

        <RenderOnScreen minWidth="lg">{children}</RenderOnScreen>

        <Box ml="auto" />

        <RenderOnScreen minWidth="lg">
          {isJsx(mainLinks) ? mainLinks : <Header.MainLinks links={mainLinks} />}

          {mainLinks !== undefined && <Header.Divider ml={1} mr={3} />}

          {isJsx(signIn) ? signIn : <Header.SignIn {...signIn} />}

          {isJsx(createAccount) ? createAccount : <Header.CreateAccount {...createAccount} />}
        </RenderOnScreen>

        <RenderOnScreen maxWidth="lg">
          {isJsx(signIn) ? signIn : <Header.SignIn {...signIn} />}

          <Header.Divider ml={2} />

          <Header.MobileToggle />

          <Header.MobileContent>
            {children}

            {isJsx(createAccount) ? createAccount : <Header.CreateAccount {...createAccount} />}

            {isJsx(mainLinks) ? mainLinks : <Header.MainLinks links={mainLinks} />}
          </Header.MobileContent>
        </RenderOnScreen>
      </Header.Content>
    </Header>
  )
})

LoggedOutHeader.displayName = 'LoggedOutHeader'

export default LoggedOutHeader
