import Box from '../box'
import Button from '../button'
import { RenderOnScreen, useDown, useStyleConfig, vui } from '../core'
import List from '../list'
import { cs, isJsx } from '../utils'
import { useHeaderContext } from './context'
import Header from './header'
import { HeaderLinkData, LoggedInHeaderProps } from './header.types'
import HeaderAccountUserInfo from './headerAccountUserInfo'
import HeaderServicesMessage from './headerServicesMessage'

/** Displays Header content appropriate for logged-in users, such as services, notifications or account information. */
export const LoggedInHeader = vui<'div', LoggedInHeaderProps>((props, ref) => {
  const {
    account,
    altUserInfo,
    supportLinks,
    applicationName,
    applicationUrl,
    children,
    className,
    isApplication = false,
    isCleanLayout = false,
    logo,
    mainLinks,
    services,
    showAltUserInfo = false,
    showMainLinks = isApplication ? false : true,
    showServices = true,
    notifications,
    url,
    ...rest
  } = props

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

  const userInfo = altUserInfo ? altUserInfo : isJsx(account) ? {} : account?.userInfo || {}

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

  const servicesLinks: HeaderLinkData[] = isJsx(services) ? [] : services?.links || []
  const styles = useStyleConfig('Header', useHeaderContext())

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

  return (
    <Header
      className={cs('vui-loggedInHeader', isApplication ? 'vui-loggedInAppHeader' : 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 || '/'} />
          </>
        )}
        {!isApplication && <RenderOnScreen minWidth="lg">{children}</RenderOnScreen>}
        <Box ml="auto" />
        {isCleanLayout ? (
          <>
            {!!url && (
              <Box>
                <Button as="a" className={cs('vui-headerSignOut')} href={url} size="lg" variant="secondaryDark">
                  Sign out
                </Button>
              </Box>
            )}
          </>
        ) : (
          <>
            {isApplication && (
              <>
                <RenderOnScreen minWidth="lg">
                  {showMainLinks && mainLinks !== undefined && (
                    <>
                      {isJsx(mainLinks) ? mainLinks : <Header.MainLinks links={mainLinks} />}
                      <Header.Divider mx={1} />
                    </>
                  )}

                  {/* the main-links are folded into the hamburger menu by default */}
                  {!showMainLinks && mainLinks && (
                    <>
                      <Header.MobileToggle ml={0} />
                      <Header.MobileContent>
                        <>
                          {isJsx(mainLinks) ? (
                            mainLinks
                          ) : (
                            <Box column w={1}>
                              <List py={1}>
                                {mainLinks?.map(({ icon, url, ...rest }, index) => (
                                  <List.Item iconLeft={icon} key={index} linkProps={{ href: url }} {...rest} />
                                ))}
                              </List>
                            </Box>
                          )}

                          {!showServices && servicesLinks && (
                            <Box column w={1}>
                              <List
                                className="vui-headerHiddenServicesLargeScreen"
                                heading="My Services"
                                maxH={295}
                                right={0}
                                w={320}
                                {...styles.services.list}
                                borderTop={1}
                                borderTopColor="sandstone.main"
                                pt={1}
                              >
                                {servicesLinks.length > 0 ? (
                                  servicesLinks?.map(({ url, ...rest }, index: number) => (
                                    <List.Item key={index} linkProps={{ href: url }} {...rest} />
                                  ))
                                ) : (
                                  <HeaderServicesMessage />
                                )}
                              </List>
                            </Box>
                          )}
                        </>
                      </Header.MobileContent>
                    </>
                  )}
                  {showServices && services && (
                    <>{isJsx(services) ? services : <Header.Services isApplication={isApplication} {...services} />}</>
                  )}
                </RenderOnScreen>

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

                {mainLinks !== undefined && <Header.Divider mx={1} />}

                {isJsx(services) ? services : <Header.Services {...services} />}
              </RenderOnScreen>
            )}
            {isJsx(notifications) ? notifications : <Header.Notifications {...notifications} />}
            {showAltUserInfo && (
              <>
                <Header.Divider ml={2} />
                <HeaderAccountUserInfo className="vui-altUserInfo" color={localTextColor} isApplication {...userInfo} />
              </>
            )}
            {isJsx(account) ? account : <Header.Account {...account} />}
            <RenderOnScreen maxWidth="lg">
              {isApplication && <Header.Divider ml={1} />}
              {!isApplication && (account !== undefined || notifications !== undefined) && <Header.Divider ml={1} />}

              <Header.MobileToggle />

              <Header.MobileContent>
                {!isApplication && children}
                {isJsx(mainLinks) ? mainLinks : <Header.MainLinks links={mainLinks} />}
                {isJsx(services) ? (
                  services
                ) : (
                  <Header.Services {...services} showTopBorder={mainLinks ? true : false} />
                )}
              </Header.MobileContent>
            </RenderOnScreen>
          </>
        )}
      </Header.Content>
    </Header>
  )
})

LoggedInHeader.displayName = 'LoggedInHeader'

export default LoggedInHeader
