import React from 'react'
import * as navStyles from './nav.module.css'
import { Link } from 'gatsby'
import { StaticImage } from "gatsby-plugin-image"

let pages = [
  ['home', '/', navStyles.desktopOnly],
  ['zeiten & location', '/treff/', ''],
  ['events', '/events/', ''],
  ['über uns', '/about/', ''],
  ['kontakt', '/kontakt/', ''],
  ['verein', '/verein/', ''],
  ['supporte uns', '/support/', ''],
]

function PathCheck(path, link) {
  const isSSR = typeof window === 'undefined'

  if(!isSSR) {
    if(path === link) {
      return ' ' + navStyles.navItemActive
    }
  
    if(link !== '/' && path !== '/') {
      if(path.includes(link)){
        return ' ' + navStyles.navItemActive
      }
    
      if(link.includes(path)){
        return ' ' + navStyles.navItemActive
      }
    }
  }

  return ''
}

export default function Nav({ path }) {
  // nav items should always be active in the staticly generated html

  return (
    <>
      <header className={navStyles.header}>
        <Link to="/">
          <div className={navStyles.headerContent}>
            <span className={navStyles.logoContainer}>
              <StaticImage
                className={navStyles.logo}
                src="../images/logo_ctdo.svg"
                alt="CTDO-Logo"
                loading="eager"
                placeholder="none"
              />
            </span>
            <span>
              <span className={navStyles.chaos}>Chaostreff</span> Dortmund
            </span>
          </div>
        </Link>
      </header>
      <nav className={navStyles.nav}>
        <div className={navStyles.navContent}>
          {pages.map(([title, link, device]) => (
            <Link
              key={title}
              className={navStyles.navItem + PathCheck(path, link) + ' ' + device}
              activeClassName={navStyles.navItemActive}
              to={`${link}`}
            >
              {title}
            </Link>
          ))}
        </div>
      </nav>
    </>
  )
}