<template>
  <div>
    <component
      :is="rootElement"
      id="app-header"
      data-turbolinks-permanent
      class="navbar navbar-expand-lg navbar-light app-header"
      :offset="100"
      :z-index="1020"
      :on-unpin="closeFollowUsPopover"
      :class="{
        'headroom--frozen': !collapseNavbar,
        'app-header--collapsed': collapseNavbar
      }"
      :style="{ position: position }"
    >
      <!-- @slot Redefines brand -->
      <slot name="brand">
        <a
          :href="homeUrl"
          class="navbar-brand app-header__brand"
        >
          <brand-expansion
            :size="45"
            :mode="shortMode"
            class="d-inline-block d-sm-none"
          />
          <brand-expansion
            :size="45"
            :mode="longMode"
            class="d-none d-sm-inline-block"
          />
          <span class="visually-hidden">International Consortium of Investigative Journalists</span>
        </a>
      </slot>
      <button
        class="navbar-toggler border-0"
        type="button"
        aria-label="Toggle navigation"
        @click="toggleNavbar"
      >
        <app-icon
          size="2rem"
          class="text-primary"
        >
          <i-ph-list />
        </app-icon>
      </button>
      <div
        class="navbar-collapse"
        :class="{ collapse: collapseNavbar }"
      >
        <ul class="navbar-nav ms-auto">
          <li class="nav-item">
            <a
              href="https://www.icij.org/investigations/"
              target="_blank"
              class="nav-link text-uppercase"
            >
              {{ t('app-header.navbar.investigations') }}
            </a>
          </li>
          <li class="nav-item">
            <a
              href="https://www.icij.org/leak/"
              target="_blank"
              class="nav-link text-uppercase"
            >
              {{ t('app-header.navbar.leak') }}
            </a>
          </li>
          <li class="nav-item">
            <a
              id="follow-us-toggler"
              class="nav-link text-uppercase"
              @mouseenter="showFollowUsPopover = true"
            >
              {{ t('app-header.navbar.follow') }}
            </a>
          </li>
          <li class="nav-item me-lg-3">
            <slot name="donate-link">
              <a
                class="text-uppercase btn btn-primary fw-bold"
                target="_blank"
                :href="donateUrl"
              >
                {{ t('app-header.navbar.support') }}
              </a>
            </slot>
          </li>
        </ul>
        <b-popover
          v-model="showFollowUsPopover"
          target="follow-us-toggler"
          placement="bottom-end"
          click
        >
          <follow-us-popover
            :compact="compactSignUp"
            @update:close="closeFollowUsPopover"
            @keydown.esc="closeFollowUsPopover"
          />
        </b-popover>
      </div>
    </component>
  </div>
</template>

<script setup lang="ts">
import { useI18n } from 'vue-i18n'
import { BPopover } from 'bootstrap-vue-next'
import Headroom from 'vue-headroom/src/headroom.vue'
import { computed, ref } from 'vue'
import type { Component } from 'vue'

import config from '@/config'
import configDefaults from '@/config.default'
import BrandExpansion from '@/components/Brand/BrandExpansion.vue'
import FollowUsPopover from '@/components/FollowUsPopover/FollowUsPopover.vue'
import AppIcon from '@/components/App/AppIcon.vue'
import { useAppHeader } from '@/composables/useAppHeader'
import { BrandMode } from '@/enums'

export interface AppHeaderProps {
  /**
   * CSS position of the header. Can be 'absolute', 'relative', 'static' or 'fixed' (default).
   */
  position?: string
  /**
   * Disable Headroom for hiding header until needed.
   */
  noHeadroom?: boolean
  /**
   * Target link of the ICIJ logo and project name.
   */
  homeUrl?: string
  /**
   * Target link of the donate button.
   */
  donateUrl?: string
  /**
   * Compact layout for the sign-up form in the follow-us popover.
   */
  compactSignUp?: boolean
}

const props = withDefaults(defineProps<AppHeaderProps>(), {
  position: 'fixed',
  noHeadroom: false,
  homeUrl: () => config.get('app.home', configDefaults['app.home']),
  donateUrl: () => config.get('app.donate-url', configDefaults['app.donate-url']),
  compactSignUp: false
})

const { t } = useI18n()
const shortMode = ref(BrandMode.Short)
const longMode = ref(BrandMode.Long)
const rootElement = computed((): string | Component => props.noHeadroom ? 'div' : Headroom)

// Navbar collapse and popover visibility are managed by useAppHeader.
const { showFollowUsPopover, collapseNavbar, closeFollowUsPopover, toggleNavbar } = useAppHeader()
</script>

<style lang="scss">

.app-header {
  background: white;
  position: relative;
  top: 0;
  width: 100%;
  z-index: $zindex-sticky;

  .popover {
    width: 100%;
  }

  & .headroom {
    will-change: transform;
    transition: transform 200ms linear;
    @include media-breakpoint-up(lg) {
      display: flex;
    }
    flex-grow: 1;

    &--unpinned {
      transform: translateY(-100%) !important;
    }

    &--pinned {
      transform: translateY(0%);
    }

    &--frozen {
      transform: translateY(0%) !important;
    }
  }

  &__brand {
    position: relative;
    font-weight: bolder;
    padding: $spacer;
    font-size: 1rem;
    display: inline-block;
  }

  .navbar-toggler {
    position: absolute;
    right: $spacer;
    top: $spacer;
    margin: 1px 0 0;
  }

  .nav-item {
    margin: 0 $spacer * 0.5;
    font-weight: bold;
    text-transform: uppercase;
    color: black;

    .nav-link {
      color: inherit;
      cursor: pointer;
    }
  }
}
</style>
