<script setup lang="ts">
import ArrowBack from '@material-design-icons/svg/round/arrow_back_ios.svg'
import ArrowTop from '@material-design-icons/svg/round/keyboard_arrow_up.svg'
import { useHead } from '@unhead/vue'
import { computed } from 'vue'
import { RouterLink, useRoute } from 'vue-router'
import { useScrollStore } from '@/store/ScrollStore'
import { useGlobalHeaderStore } from './GlobalHeaderStore'

const route = useRoute()
const arrowBackVisible = computed(() => {
  return route.path !== '/'
})

const scrollStore = useScrollStore()
const headerStore = useGlobalHeaderStore()
useHead({
  title: () => headerStore.titleWithDefault,
})
</script>

<template>
  <header class="tw:flex tw:flex-row tw:gap-4">
    <RouterLink
      v-if="arrowBackVisible" to="/"
      class="header-button-back tw:flex-none tw:aspect-square tw:max-w-10 tw:flex tw:place-items-center tw:justify-center"
    >
      <ArrowBack class="tw:fill-current tw:w-10 tw:h-10" />
    </RouterLink>
    <h1 class="tw:flex-1 tw:p-2 tw:text-4xl tw:text-center">
      {{ headerStore.title }}<span v-if="headerStore.hasTitle" class="tw:max-sm:hidden">{{ headerStore.default }}</span>
    </h1>
    <button
      type="button" title="Scroll to Top"
      class="tw:flex-none tw:aspect-square tw:max-w-10 tw:flex tw:place-items-center tw:justify-center tw:disabled:opacity-30 tw:transition-opacity"
      :disabled="scrollStore.isAtTop" @click="scrollStore.scrollToTop"
    >
      <ArrowTop class="tw:fill-current tw:w-10 tw:h-10" />
    </button>
  </header>
</template>

<style scoped>
header {
  background-color: var(--header-background-color);
  border-bottom: var(--view-separator-border);
}

.header-button-back:any-link {
  color: unset;
}
</style>
