<template>
  <div
    v-if="niches.length > 1"
    ref="nicheRef"
    class="layout-niche"
    @keydown.esc="isOpen = false"
  >
    <button
      :class="{'--open': isOpen}"
      :aria-expanded="isOpen"
      :aria-label="$t('niche')"
      class="layout-niche__trigger"
      type="button"
      @click="isOpen = !isOpen"
    >
      <UiIcon
        :name="currentNiche.icon"
        :size="iconSize"
        class="layout-niche__icon"
      />
      <span class="layout-niche__current _to-sm">
        <span>{{ $t('niche') }}:&nbsp;</span>
        <span class="layout-niche__text">{{ $t(currentNiche.label) }}</span>
      </span>
      <UiIcon
        class="layout-niche__angle"
        name="angle-down"
        size="12"
      />
    </button>
    <ul
      v-if="isOpen"
      class="layout-niche__list"
    >
      <li
        v-for="item in niches"
        :key="`niche-${item.name}`"
      >
        <button
          :class="{'--current': item.name === currentNiche.name}"
          :aria-current="item.name === currentNiche.name ? 'true' : undefined"
          class="layout-niche__item"
          type="button"
          @click="select(item.name)"
        >
          <UiIcon
            :name="item.icon"
            class="layout-niche__item-icon"
            size="20"
          />
          {{ $t(item.label) }}
        </button>
      </li>
    </ul>
  </div>
</template>

<script setup lang="ts">
import { onClickOutside } from '@vueuse/core';
import type { Niche } from '../../runtime';

withDefaults(defineProps<{
      iconSize?: string
    }>(), {
      iconSize: '20'
    }
);

const { niches, currentNiche, changeNiche } = useNiches();

const nicheRef = ref<HTMLElement>();
const isOpen = ref(false);

onClickOutside(nicheRef, () => {
  isOpen.value = false;
});

function select(name: Niche) {
  isOpen.value = false;
  changeNiche(name);
}
</script>

<style lang="scss">
.layout-niche {
  display: grid;

  @include from-br(sm) {
    position: relative;
  }
}

.layout-niche__trigger {
  display: grid;
  grid-auto-flow: column;
  align-items: center;
  justify-content: start;
  column-gap: 6px;
  padding: 6px 8px;
  color: $niche-trigger-text;

  @include to-br(sm) {
    grid-template-columns: auto 1fr auto;
    width: 100%;
    padding: 10px 16px;
    column-gap: 16px;
  }
}

.layout-niche__current {
  @include font-sm;

  display: grid;
  grid-template-columns: auto 1fr;
  color: $niche-title;
}

.layout-niche__text {
  color: $niche-value-text;
  font-weight: 500;
}

.layout-niche__angle {
  pointer-events: none;
  transition: transform var(--transition), color var(--transition);
}

.layout-niche__trigger:hover .layout-niche__angle {
  color: $niche-angle--hover;
}

.layout-niche__trigger.--open .layout-niche__angle {
  transform: rotate(180deg);
}

.layout-niche__list {
  display: grid;

  @include from-br(sm) {
    position: absolute;
    right: 0;
    bottom: -8px;
    z-index: $z-index-plus;
    min-width: 180px;
    padding: 8px;
    background-color: $niche-menu-bg;
    border: 1px solid $niche-menu-border;
    border-radius: $radius-xl;
    transform: translateY(100%);
  }
}

.layout-niche__item {
  @include font-sm;

  display: grid;
  grid-template-columns: 20px 1fr;
  align-items: center;
  column-gap: 12px;
  width: 100%;
  padding: 10px 16px;
  color: $niche-item-text;
  text-align: start;
  border-radius: $radius-lg;

  @include hover(background-color) {
    background-color: $niche-item-bg--hover;
  }

  @include from-br(sm) {
    padding: 8px 10px;
  }
}

.layout-niche__item.--current {
  color: $niche-item-text--current;
  background-color: $niche-item-bg--current;
}
</style>
