import React, { useRef, useState } from 'react'

import { styled, useLinks, useStyleConfig, useUp, vui, VuiComponent } from '../core'
import { cs, useClickOutside } from '../utils'
import { HeaderProvider } from './context'
import { HeaderProps } from './header.types'
import HeaderAccount from './headerAccount'
import HeaderAccountUserInfo from './headerAccountUserInfo'
import HeaderApplicationName from './headerApplicationName'
import HeaderContent from './headerContent'
import HeaderCreateAccount from './headerCreateAccount'
import HeaderDivider from './headerDivider'
import HeaderLinkItem from './headerLinkItem'
import HeaderLogo from './headerLogo'
import HeaderMainLinks from './headerMainLinks'
import HeaderMobileContent from './headerMobileContent'
import HeaderMobileToggle from './headerMobileToggle'
import HeaderNotifications from './headerNotifications'
import HeaderServices from './headerServices'
import HeaderServicesMessage from './headerServicesMessage'
import HeaderSignIn from './headerSignIn'
import HeaderSupport from './headerSupport'

/*@formatter:off*/
export const HeaderBase = styled.headerBox`
  align-items: center;
  background-color: white;
  border-bottom: 1px solid darkBlue.main;
  display: flex;
  position: relative;
`
/*@formatter:on*/

/** Branded Veracity Header with logo, links, services, account and other data. Controls max-width of the content. */
export const Header = vui<'header', HeaderProps>((props, ref) => {
  const { className, isSticky, size, variant, ...rest } = props
  const [isMobileOpen, setIsMobileOpen] = useState(false)
  const mobileContentRef = useRef(null)
  const mobileToggleRef = useRef(null)
  const styles = useStyleConfig('Header', props)

  const headerHeight = 72

  const [links] = useLinks()

  useClickOutside([mobileContentRef, mobileToggleRef], () => {
    setIsMobileOpen(false)
  })

  const isDesktop = useUp('lg')
  const isMobile = !isDesktop

  const context = {
    headerHeight,
    isDesktop,
    isMobile,
    isMobileOpen,
    links,
    mobileContentRef,
    mobileToggleRef,
    setIsMobileOpen,
    size,
    variant,
  }

  return (
    <HeaderProvider value={context}>
      <HeaderBase
        className={cs('vui-header', className)}
        h={headerHeight}
        position={isSticky ? 'sticky' : 'static'}
        px={{ xs: 2, lg: 5 }}
        ref={ref}
        role="banner"
        top={isSticky ? 0 : 'auto'}
        {...styles.container}
        {...rest}
      />
    </HeaderProvider>
  )
}) as VuiComponent<'header', HeaderProps> & {
  Account: typeof HeaderAccount
  AccountUserInfo: typeof HeaderAccountUserInfo
  Support: typeof HeaderSupport
  ApplicationName: typeof HeaderApplicationName
  Content: typeof HeaderContent
  CreateAccount: typeof HeaderCreateAccount
  Divider: typeof HeaderDivider
  LinkItem: typeof HeaderLinkItem
  Logo: typeof HeaderLogo
  MainLinks: typeof HeaderMainLinks
  MobileContent: typeof HeaderMobileContent
  MobileToggle: typeof HeaderMobileToggle
  Notifications: typeof HeaderNotifications
  Services: typeof HeaderServices
  ServicesMessage: typeof HeaderServicesMessage
  SignIn: typeof HeaderSignIn
}

Header.Account = HeaderAccount
Header.AccountUserInfo = HeaderAccountUserInfo
Header.Support = HeaderSupport
Header.ApplicationName = HeaderApplicationName
Header.Content = HeaderContent
Header.CreateAccount = HeaderCreateAccount
Header.Divider = HeaderDivider
Header.LinkItem = HeaderLinkItem
Header.Logo = HeaderLogo
Header.MainLinks = HeaderMainLinks
Header.MobileContent = HeaderMobileContent
Header.MobileToggle = HeaderMobileToggle
Header.Notifications = HeaderNotifications
Header.Services = HeaderServices
Header.ServicesMessage = HeaderServicesMessage
Header.SignIn = HeaderSignIn
Header.displayName = 'Header'
export default Header
