import { h } from 'preact'
import { Link as ReactLink } from 'react-router-dom'
import { RightBox, StyledRow as Row, Modal } from './styles'
import { ImageLogo } from '../Logo'
import { useWindowSize } from '../../hooks/dom'
import Link from '../Link'
import { Span } from '../Text'
import CrossSvg from '../Svg/Cross'

import navigation from '../../data/navigation'
import { colours, screenSizes, textSizes } from '../../assets/theme'
import { useToggle } from '../../hooks/utility'

const Navigation = ({ theme = {}, lang = 'en', headerTheme }) => navigation[lang].map(navItem => (
  <Link
    navLink
    to={navItem.to}
    href={navItem.href}
    textProps={{
      size: textSizes.xl,
      colour: headerTheme.foreground || theme.foreground || colours.rose
    }}>
    {navItem.label}
  </Link>
))

const NavigationModal = ({ theme = {}, lang = 'en', headerTheme, toggleMenuOpen, ...rest }) => (
  <Modal theme={theme} {...rest}>
    <ReactLink to="/">
      <ImageLogo />
    </ReactLink>
    <CrossSvg size={32} colour={theme.foreground} onClick={toggleMenuOpen} />
    <div>
      <Navigation theme={theme} lang={lang} headerTheme={theme} {...rest} />
    </div>
  </Modal>
)

const FullHeader = ({ theme = {}, headerTheme = {}, lang = 'en', miniHeader, isMobile, toggleMenuOpen, ...rest }) => (
  <Row theme={headerTheme} align="center" justify="space-between" miniHeader={miniHeader} {...rest}>
    {!miniHeader ? <ReactLink to="/">
      <ImageLogo />
    </ReactLink> : null}
    {!isMobile ? (
      <RightBox as="nav">
        <Navigation theme={theme} lang={lang} headerTheme={headerTheme} {...rest} />
      </RightBox>
    ) : <Span onClick={toggleMenuOpen} size={textSizes.xl} colour={headerTheme.foreground || theme.foreground || colours.rose} fontFamily="Lunchtype24"
    >Menu</Span>}
  </Row>
)



const Header = ({ miniHeader, theme, ...rest }) => {
  const headerTheme = { foreground: theme.background, background: 'transparent', }
  const { width: screenWidth } = useWindowSize()
  const [menuOpen, toggleMenuOpen] = useToggle(false)
  const isMobile = screenWidth < screenSizes.lg

  if (menuOpen) return <NavigationModal toggleMenuOpen={toggleMenuOpen} theme={theme} headerTheme={headerTheme} {...rest} />

  return <FullHeader toggleMenuOpen={toggleMenuOpen} menuOpen={menuOpen} miniHeader={miniHeader} isMobile={isMobile} theme={theme} headerTheme={headerTheme} {...rest} />
}

export default Header