---
import { urls, type nav } from "/site-config";
import boxBlr from "/assets/box-blr.png";
import dot from "/assets/dot.png";
import boxTlbr from "/assets/box-tlbr.png";

const betweenArr = <A, I>(arr: A[], item: I): (A | I)[] =>
  arr.flatMap((x, i) => (i !== 0 ? [item, x] : [x]));

const strToX = <I,>(
  arr: string,
  map: [string, I][],
): (string | I)[] | string => {
  const [key, value] = map.pop() ?? [undefined, undefined];
  if (!key) return arr;
  return betweenArr(arr.split(key), value).flatMap((x: string | I) =>
    typeof x === "string" ? strToX(x, map) : x,
  );
};
---

<header style={`--box-blr-png: url("${boxBlr.src}")`}>
  <h1>vielle.dev</h1>

  <nav>
    <ul
      style={`--dot-png: url("${dot.src}"); 
              --box-tlbr-png: url("${boxTlbr.src}")`}
    >
      {
        (() => {
          const name = (url: nav) =>
            url.slug ? (
              <a href={url.slug}>
                {strToX(url.name, [
                  ["&shy;", <>&shy;</>],
                  ["<wbr>", <wbr />],
                ])}
              </a>
            ) : (
              url.name
            );
          const flatten = (urls: nav[]) =>
            urls.map((url) => (
              <li>
                {name(url)}
                {url.children && <ul>{flatten(url.children)}</ul>}
              </li>
            ));
          return urls.map((url) => (
            <li>
              {url.children ? (
                <details name="nav">
                  <summary>{name(url)}</summary>
                  <ul>{flatten(url.children)}</ul>
                </details>
              ) : (
                name(url)
              )}
            </li>
          ));
        })()
      }
    </ul>
  </nav>
</header>

<style>
  /* UPDATE RSS STYLE XML WHEN YOU CHANGE THESE */
  header {
    border-image: var(--box-blr-png) 10 fill / 20px / 20px round;
    margin: 0 20px 20px;
    padding: 10px 20px;
    height: 3rem; /* 2rem * 1.5 */
    /* render over feed bg */
    z-index: 2;

    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;

    @media (max-width: 650px) {
      flex-direction: column;
      align-items: start;
      height: 4.5rem; /* (2rem + 1rem) * 1.5 */

      nav {
        margin-inline: auto;
        contain: inline-size;
        width: 100%;
        overflow: auto;
        scrollbar-width: thin;
      }

      h1 {
        width: 100%;
        text-align: center;
      }
    }

    & > nav > ul {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: start;
      gap: 10px;
      z-index: 999;
      width: fit-content;
      margin-inline: auto;

      & > li {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 10px;

        &::marker {
          content: none;
        }

        & + &::before {
          content: "";
          background-image: var(--dot-png);
          background-size: contain;
          width: 9px;
          height: 9px;
          display: block;
        }
      }
    }
  }

  nav > ul > li:last-child > details > ul {
    right: 10px;
  }

  details {
    summary {
      cursor: pointer;
      text-wrap: nowrap;
    }

    & > ul {
      position: absolute;
      z-index: 99999;

      @media (max-width: 650px) {
        inset: auto 15px;
      }

      margin-top: 10px;
      padding: 20px;
      padding-left: 40px;
      & ul {
        margin-left: 10px;
      }

      border-image: var(--box-tlbr-png) 10 fill / 20px round;
    }
  }

  h1 {
    margin-block: 0;
    position: sticky;
    inset: 0;
  }
</style>