import styles from '/styles/ReadyOrNot.module.css'
import Link from 'next/link'
import { useRouter } from 'next/router'
import useSWR from 'swr';
import ReadyOrNotMap from '../interfaces/ReadyOrNot';
import React, { useState } from 'react';
import Image from 'next/image'

const fetcher = (url: string) => fetch(url).then((res) => res.json())

function stopPropagation(e: any) {
  e.stopPropagation();
}


const Sidebar = () => {
  const router = useRouter();
  const [active, setActive] = useState(true);
  const { maps, isLoading, isError } = useNavbar();

  if (isError) { return (<div><nav><a>Error loading Sidemenu</a></nav></div>) }
  else if (isLoading) {
    return (
      <div>
        <nav>
          <a>Loading...</a>
        </nav>
      </div>
    )
  }
  else {
    // > is a placeholder
    return (
      <div className={styles.sidebar} onClick={() => setActive(!active)}>
        <nav className={[styles.sidebarList, (active ? styles.sl_active : styles.sl_inactive)].join(" ")}>
          {maps.map((item: ReadyOrNotMap) => (
            <Link key={item.name} href={item.href}>
              <a className={[styles.navElem, (router.query.map == item.href ? styles.ne_active: styles.ne_inactive)].join(" ")} onClick={stopPropagation}>{item.name}</a>
            </Link>
          ))}
        </nav>
        <div className={styles.sidebarArrow}>
          <Image src="/sidebar_arrow.webp" width={32} height={96} alt=">"/>
        </div>
      </div>
    );
  }
}

function useNavbar() {
  const { data, error } = useSWR(`/api/navbar`, fetcher)

  return {
    maps: data,
    isLoading: !error && !data,
    isError: error
  }
}

export default Sidebar;