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';
import useWindowSize from '../components/windowsize';

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

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

const Sidebar = () => {
  const isMobile = useWindowSize();
  const router = useRouter();
  const [active, setActive] = useState(isMobile);
  const { maps, isLoading, isError }: { maps: ReadyOrNotMap[], isLoading: boolean, isError: boolean } = useNavbar();

  if (typeof (isMobile) === "boolean" && typeof (active) === "undefined") {
    setActive(!isMobile);
  }

  if (isError) {
    return (
      <>
        <div><nav><a>Error loading Sidemenu</a></nav></div>
        <div className={styles.sidebarPlaceholder}></div>
      </>
    )
  }
  else if (isLoading) {
    return (
      <>
        <div>
          <nav>
            <a>Loading...</a>
          </nav>
        </div>
        <div className={styles.sidebarPlaceholder}></div>
      </>
    )
  }
  else {
    return (
      <>
        <div className={styles.sidebar} onClick={() => setActive(!active)}>
          <div className={[styles.sl_wrapper, (active ? styles.sl_active : styles.sl_inactive)].join(" ")}>
            <nav className={styles.sidebarList}>
              {maps.map((item) => (
                <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>
          <div className={styles.sidebarArrow}>
            <Image src={active ? "/sidebar_arrow_flipped.webp" : "/sidebar_arrow.webp"} width={32} height={96} alt={active ? ">" : "<"} />
          </div>
        </div>
        <div className={styles.sidebarPlaceholder}></div>
      </>
    );
  }
}

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

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

export default Sidebar;