<header class="siteHeader container">
  <div class="siteHeader__content">
    <a class="siteHeader__logo" href="">
      <svg viewBox="0 0 300 133" fill="none" xmlns="http://www.w3.org/2000/svg">
        <rect width="300" height="133" fill="#8000FF"/>
      </svg>
    </a>
    <nav class="siteHeader__utilityNav navigation">
      <ul class="navigation__list">
        <li class="navigation__item">
          <p-openable class="navigation__button" label="Utility Dropdown" :close-on-blur="false">
            <div class="navigation__dropdown">
              <ul>
                <li>
                  <a href=""><span>Elit?</span></a>
                </li>
                <li>
                  <a href=""><span>Dolor.</span></a>
                </li>
                <li>
                  <a href=""><span>Adipisicing!</span></a>
                </li>
                <li>
                  <a href=""><span>Amet</span></a>
                </li>
                <li>
                  <a href=""><span>Adipisicing</span></a>
                </li>
              </ul>
            </div>
          </p-openable>
        </li>
        <li class="navigation__item">
          <a href="#" class="navigation__link">Contact</a>
        </li>
      </ul>
    </nav>
    <div class="siteHeader__search search">
      <svg class="search__icon" xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256"><path d="M232.49,215.51,185,168a92.12,92.12,0,1,0-17,17l47.53,47.54a12,12,0,0,0,17-17ZM44,112a68,68,0,1,1,68,68A68.07,68.07,0,0,1,44,112Z"></path></svg>
      <input class="search__input input" type="search" placeholder="Search">
    </div>
    <nav class="siteHeader__mobileNav mobileNavigation">
      <p-openable class="mobileNavigation__menu button -circle -ghost" label="menu">
        <template #toggle>
            <svg class="button__icon icon"><use href="/main-icons-sprite.svg#bars" /></svg>
        </template>
        <template v-slot="{ toggle }">
          <div class="mobileNavigation__pane" v-scrolllock>
            <div class="mobileNavigation__title">
              Menu
            </div>
            <ul class="mobileNavigation__list" v-directionals>
              <li>
                <p-openable class="mobileNavigation__button" name="submenu">
                  <template #toggle>
                    Submenu
                    <svg class="icon"><use href="/main-icons-sprite.svg#chevron-right" /></svg>
                  </template>
                  <template v-slot="{ toggle }">
                    <div class="mobileNavigation__pane">
                      <div class="mobileNavigation__title">
                        <div class="mobileNavigation__actions">
                          <button class="button -circle -ghost" @click.stopPropagation="toggle" tabindex="-1">
                            <svg class="icon"><use href="/main-icons-sprite.svg#chevron-left" /></svg>
                          </button>
                        </div>
                        Menu
                      </div>
                      <ul class="mobileNavigation__list" v-directionals>
                        <li class="mobileNavigation__item"><a href="" class="mobileNavigation__link">Consectetur asperiores</a></li>
                        <li class="mobileNavigation__item"><a href="" class="mobileNavigation__link">Consectetur asperiores</a></li>
                        <li class="mobileNavigation__item"><a href="" class="mobileNavigation__link">Amet porro.</a></li>
                        <li class="mobileNavigation__item"><a href="" class="mobileNavigation__link">Ipsum dolorem</a></li>
                      </ul>
                    </div>
                  </template>
                </p-openable>
              </li>
              <li>
                <p-openable class="mobileNavigation__button" name="submenu">
                  <template #toggle>
                    STUFF
                    <svg class="icon"><use href="/main-icons-sprite.svg#chevron-right" /></svg>
                  </template>
                  <template v-slot="{ toggle }">
                    <div class="mobileNavigation__pane">
                      <div class="mobileNavigation__title">
                        <div class="mobileNavigation__actions">
                          <button class="button -circle -ghost" @click.stopPropagation="toggle" tabindex="-1">
                            <svg class="icon"><use href="/main-icons-sprite.svg#chevron-left" /></svg>
                          </button>
                        </div>
                        Menu
                      </div>
                      <ul class="mobileNavigation__list" v-directionals>
                        <li class="mobileNavigation__item"><a href="" class="mobileNavigation__link">Consectetur asperiores</a></li>
                        <li class="mobileNavigation__item"><a href="" class="mobileNavigation__link">Consectetur asperiores</a></li>
                        <li class="mobileNavigation__item"><a href="" class="mobileNavigation__link">Amet porro.</a></li>
                        <li class="mobileNavigation__item"><a href="" class="mobileNavigation__link">Ipsum dolorem</a></li>
                      </ul>
                    </div>
                  </template>
                </p-openable>
              </li>
              <li class="mobileNavigation__item"><a href="" class="mobileNavigation__link">Consectetur asperiores</a></li>
              <li class="mobileNavigation__item"><a href="" class="mobileNavigation__link">Amet porro.</a></li>
              <li class="mobileNavigation__item"><a href="" class="mobileNavigation__link">Ipsum dolorem</a></li>
              <li class="mobileNavigation__item">
                <a class="mobileNavigation__link" href="">Amet impedit cumque</a>
              </li>
              <li class="mobileNavigation__item">
                <a class="mobileNavigation__link" href="">Consectetur vitae temporibus!</a>
              </li>
              <li class="mobileNavigation__item">
                <a class="mobileNavigation__link" href="">Consectetur doloremque reiciendis</a>
              </li>
              <li class="mobileNavigation__item">
                <a class="mobileNavigation__link" href="">Dolor pariatur rerum.</a>
              </li>
              <li class="mobileNavigation__item">
                <a class="mobileNavigation__link" href="">Ipsum a officiis.</a>
              </li>
              <li class="mobileNavigation__item">
                <a class="mobileNavigation__link" href="">Dolor unde debitis.</a>
              </li>
              <li class="mobileNavigation__item">
                <a class="mobileNavigation__link" href="">Adipisicing delectus velit</a>
              </li>
              <li class="mobileNavigation__item">
                <a class="mobileNavigation__link" href="">Amet aliquam voluptates</a>
              </li>
            </ul>
          </div>
          <div class="mobileNavigation__closeButton">
            <button class="button -circle -ghost" @click="toggle">
              <svg class="icon"><use href="/main-icons-sprite.svg#close" /></svg>
            </button>
          </div>
        </template>
      </p-openable>
    </nav>

    <nav class="siteHeader__primaryNav navigation" v-directionals>
      <ul class="navigation__list">
        <li class="navigation__item" v-directionals>
          <p-openable class="navigation__button" label="Default Dropdown" :close-on-blur="false">
            <div class="navigation__dropdown">
              <ul>
                <li><a href=""><span>Consectetur asperiores</span></a></li>
                <li><a href=""><span>Consectetur asperiores</span></a></li>
                <li><a href=""><span>Amet porro.</span></a></li>
                <li><a href=""><span>Ipsum dolorem</span></a><li>
              </ul>
            </div>
          </p-openable>
        </li>
        <li class="navigation__item" v-directionals>
          <p-openable class="navigation__button" label="Centered Dropdown" :close-on-blur="false">
            <div class="navigation__dropdown -center">
              <ul>
                <li><a href=""><span>Consectetur asperiores</span></a></li>
                <li><a href=""><span>Consectetur asperiores</span></a></li>
                <li><a href=""><span>Amet porro.</span></a></li>
                <li><a href=""><span>Ipsum dolorem</span></a><li>
              </ul>
            </div>
          </p-openable>
        </li>
        <li class="navigation__item -wide" v-directionals>
          <p-openable class="navigation__button" label="Full-width Dropdown" :close-on-blur="false">
            <div class="navigation__dropdown grid -columns-3">
              <div class="cell">
                <h3>Heading</h3>
                <p>
                  Adipisicing obcaecati tempora qui ullam voluptates beatae? Assumenda soluta quae
                </p>
                <ul>
                  <li><a href=""><span>Consectetur asperiores</span></a></li>
                  <li><a href=""><span>Consectetur asperiores</span></a></li>
                  <li><a href=""><span>Amet porro.</span></a></li>
                  <li><a href=""><span>Ipsum dolorem</span></a><li>
                </ul>
              </div>
              <div class="cell">
                <h3>Heading</h3>
                <p>
                  Adipisicing obcaecati tempora qui ullam voluptates beatae? Assumenda soluta quae
                </p>
                <ul>
                  <li><a href=""><span>Consectetur asperiores</span></a></li>
                  <li><a href=""><span>Consectetur asperiores</span></a></li>
                  <li><a href=""><span>Amet porro.</span></a></li>
                  <li><a href=""><span>Ipsum dolorem</span></a><li>
                </ul>
              </div>
              <div class="cell">
                <h3>Heading</h3>
                <p>
                  Adipisicing obcaecati tempora qui ullam voluptates beatae? Assumenda soluta quae
                </p>
                <ul>
                  <li><a href=""><span>Consectetur asperiores</span></a></li>
                  <li><a href=""><span>Consectetur asperiores</span></a></li>
                  <li><a href=""><span>Amet porro.</span></a></li>
                  <li><a href=""><span>Ipsum dolorem</span></a><li>
                </ul>
              </div>
            </div>
          </p-openable>
        </li>
        <li class="navigation__item" v-directionals>
          <p-openable class="navigation__button" label="Right Aligned Dropdown" :close-on-blur="false">
            <div class="navigation__dropdown -rightAligned">
              <ul>
                <li><a href=""><span>Consectetur asperiores</span></a></li>
                <li><a href=""><span>Consectetur asperiores</span></a></li>
                <li><a href=""><span>Amet porro.</span></a></li>
                <li><a href=""><span>Ipsum dolorem</span></a><li>
              </ul>
            </div>
          </p-openable>
        </li>
      </ul>
    </nav>
  </div>
</header>

@use "@imarc/pronto/resources/styles/imported" as *;

.siteHeader {
  padding: var(--gap) 0;

  &__content {
    display: grid;
    grid: "logo search mobile-nav" auto / auto 1fr auto;
    align-items: center;
    gap: 0 var(--gap);
  }

  &__logo {
    grid-area: logo;
    display: grid;
    padding: .5rem 0;
    align-self: stretch;

    svg {
      height: 100%;
    }
  }

  &__utilityNav {
    display: none;
    grid-area: utility-nav;
    font-size: .75rem;
    justify-self: end;
    gap: 1.5rem;
  }

  &__primaryNav {
    display: none;
    grid-area: primary-nav;
    justify-self: end;
  }

  &__search {
    justify-self: end;
    width: #{fluid-rems(8, 8, 16)};
  }

  @include at(md) {
    &__content {
      grid: "logo utility-nav search" auto
            "primary-nav primary-nav primary-nav" auto
            / auto 1fr auto;
    }

    &__primaryNav,
    &__utilityNav {
      display: grid;
      justify-self: end;
    }

    &__mobileNav {
      display: none;
    }
  }

  @include at(lg) {
    &__content {
      grid: "logo utility-nav search" auto
            "logo spacer spacer" auto
            "logo primary-nav primary-nav" auto
            / auto 1fr auto;
    }
  }
}

<script>
  const openableGroups = {}
</script>

<script setup>
import { ref, nextTick, useSlots, useTemplateRef } from 'vue'

import focusableElements from '../composables/FocusableElements.js'

const { closeOnBlur, refocus, label, name } = defineProps({
  closeOnBlur: { type: Boolean, default: true },
  refocus: { type: Boolean, default: true },
  label: { type: String, default: "" },
  name: { type: String, default: "global" },
})
const emit = defineEmits(['open', 'close'])
const slots = useSlots()
const button = useTemplateRef('button')
const openable = useTemplateRef('openable')
const open = ref(false)

const targetOutside = evt => {
  if (openable.value && !openable.value.contains(evt.target)) {
    toggle()
  }
}

const pressEscape = evt => {
  if (evt.key === 'Escape') {
    evt.stopPropagation()
    toggle()
  }
}

let escapeHandler = null

const updateGroup = (open) => {
  if (!name) {
    return
  }

  if (!(name in openableGroups)) {
    openableGroups[name] = new Set()
  }

  if (open) {
    openableGroups[name].forEach(t => t())
    openableGroups[name].add(toggle)
  } else {
    openableGroups[name].delete(toggle)
  }
}

const toggle = evt => {
  evt?.stopPropagation()
  emit(open.value ? 'close' : 'open')
  open.value = !open.value
  updateGroup(open.value)
  nextTick(() => {
    if (open.value) {
      if (refocus) {
        focusableElements(openable)?.[0].focus()
      }

      document.documentElement.addEventListener('click', targetOutside)
      openable.value.addEventListener('keydown', pressEscape)

      if (closeOnBlur) {
        document.documentElement.addEventListener('focusin', targetOutside)
      }
    } else {
      document.documentElement.removeEventListener('click', targetOutside)
      openable.value.removeEventListener('keydown', pressEscape)

      if (closeOnBlur) {
        document.documentElement.removeEventListener('focusin', targetOutside)
      }

      focusableElements(button)?.[0].focus()
    }
  })
}
</script>

<template>
  <button v-bind="$attrs" ref="button" @click="toggle">
    <slot name="toggle" v-bind="{ toggle }">{{ label }}</slot>
  </button>
  <div ref="openable">
    <slot v-if="open" v-bind="{ toggle }" />
  </div>
</template>

import focusableElements from '../composables/FocusableElements.js'

/**
 * Default key filters. These should be functions that 'filter out' what
 * elements should be considered when a key is hit.
 */
const KEY_BINDINGS = {
  ArrowRight: elements => elements.filter(({ x, top, bottom }) => x > 0 && top < 0 && bottom > 0),
  ArrowLeft: elements => elements.filter(({ x, top, bottom }) => x < 0 && top < 0 && bottom > 0),
  ArrowDown: elements => elements.filter(({ y, left, right }) => y > 0 && left < 0 && right > 0),
  ArrowUp: elements => elements.filter(({ y, left, right }) => y < 0 && left < 0 && right > 0),
  Home: elements => elements.length && elements.slice(0, 1),
  End: elements => elements.length && elements.slice(-1),
}

/**
 * Retrieves where the element is drawn on screen (client rects).
 * Adds in x and y for the center of the element.
 */
const getElementRects = el => {
  if (!el) {
    console.error("Unable to determine location of element", el);
    return null
  }

  const rects = el.getClientRects()[0]

  if (!rects) {
    return getElementRects(el.parentElement)
  }

  return {
    bottom: rects.bottom,
    height: rects.height,
    left: rects.left,
    right: rects.right,
    top: rects.top,
    width: rects.width,
    x: rects.left + rects.width / 2,
    y: rects.top + rects.height / 2,
  }
}

/**
 * Calls getElementRects for every element in nodeList, and adjust the
 * values to be relative to origin for simpler follow up math. Also
 * calculates the distance between the two elements' centers.
 */
const augmentElementRects = (nodeList, origin) => {
  const elements = []
  origin = getElementRects(origin)

  nodeList.forEach(el => {
    const rects = getElementRects(el)
    if (rects === null) {
      return
    }

    rects.bottom -= origin.y
    rects.left -= origin.x
    rects.right -= origin.x
    rects.top -= origin.y
    rects.x -= origin.x
    rects.y -= origin.y

    const distance = Math.sqrt(rects.x * rects.x + rects.y * rects.y)

    elements.push({ el, ...rects, distance })
  })

  return elements
}

const findTarget = (el, key, root) => {
  const elements = augmentElementRects(focusableElements(root), el)
  if (key in KEY_BINDINGS) {
    const { el } = KEY_BINDINGS[key](elements).reduce(
      (closest, el) => {
        return el.distance < closest.distance ? el : closest
      },
      { distance: Infinity }
    )

    return el
  }
  return null
}

export default {
  mounted(element) {
    const handler = evt => {
      const target = findTarget(evt.target, evt.key, element)

      if (target) {
        evt.preventDefault()
        evt.stopPropagation()
        target.focus()
      }
    }
    element.addEventListener('keydown', handler)
  },
}

export default {
  mounted() {
    document.documentElement.style.overflow = 'hidden'
  },
  unmounted() {
    document.documentElement.style.overflow = ''
  },
}