<template>
  <header
    :class="{'--burger-open': burgerShow}"
    class="layout-header"
  >

    <SearchMain class="layout-header__search"/>

    <LayoutLogo
      glow
      class="layout-header__logo"
    />
    <LayoutNiche
      class="layout-header__niche _from-sm"
      icon-size="20"
    />

    <LayoutNotifications class="layout-header__notifications"/>

    <div
      ref="languageRef"
      class="layout-header__language _from-sm"
    >
      <button
        :class="{'--open': showLanguage}"
        :aria-label="$t('language')"
        class="layout-header__language-trigger"
        type="button"
        @click="showLanguageMenu"
      >
        <img
          v-if="clientCountryFlag"
          :src="clientCountryFlag"
          :alt="clientCountryIcon"
          class="layout-header__language-icon"
          width="24"
          height="16"
        >
        <UiIcon
          v-else
          class="layout-header__language-icon"
          name="earth"
          size="20"
        />
        <UiIcon
          class="layout-header__language-angle"
          name="angle-down"
          size="12"
        />
      </button>
      <transition mode="out-in">
        <KeepAlive>
          <LazyLayoutLanguage
            v-if="showLanguage"
            class="layout-header__language-menu"
            icon-size="20"
            @change="closeLanguage"
          />
        </KeepAlive>
      </transition>
    </div>

    <LazyLayoutHeaderUser
      v-if="isAuthorized"
      class="layout-header__user _from-sm"
    />

    <template v-else>
      <UiBtn
        class="layout-header__sign-up _from-sm"
        theme="primary"
        @click="openAuthPopup(AuthSteps.Registration)"
      >{{ $t('sign_up_button') }}
      </UiBtn>
    </template>

    <button
      :aria-label="$t('show_menu')"
      class="layout-header__burger _to-sm"
      type="button"
      @click="burgerShow = true"
    >
      <UiIcon
        class="layout-header__burger-bars"
        name="bars"
        size="24"
      />
    </button>

    <LayoutBurger
      v-show="burgerShow"
      v-model="burgerShow"
    />
  </header>
</template>

<script setup lang="ts">
import { AuthSteps } from '../../runtime';
import { onClickOutside } from '@vueuse/core';
import { AuthorizationApiService } from '../../services/api/authorization.service';

const { icon: clientCountryIcon, flagSrc: clientCountryFlag } = useClientCountry();

const burgerShow = ref(false);
const showLanguage = ref(false);
const languageRef = ref<HTMLElement>();

const { isAuthorized } = useUser(AuthorizationApiService);

const { openAuthPopup } = useAuthPopup();

onClickOutside(languageRef, () => {
  showLanguage.value = false;
});

function showLanguageMenu() {
  showLanguage.value = !showLanguage.value;
}

function closeLanguage() {
  showLanguage.value = false;
}
</script>

<style lang="scss">
$breakpoint: sm;

.layout-header {
  display: grid;
  column-gap: 12px;
  grid-auto-flow: column;
  align-items: center;
  justify-content: space-between;
  height: var(--header-height);
  background-color: $header-bg;
  width: 100%;

  @include from-br(sm) {
    grid-template-columns: auto 1fr auto auto auto auto;
  }

  /* поиск | лого | колокольчик | бургер — 1fr держит лого по центру */
  @include to-br(sm) {
    grid-template-columns: auto 1fr auto auto;
    column-gap: 4px;
  }
}

.layout-header__logo {
  @include from-br(sm) {
    grid-column: 1;
    grid-row: 1;
  }

  @include to-br(sm) {
    justify-self: center;
  }
}

.layout-header__burger {
  position: relative;
  display: grid;
  place-content: center;
  color: $header-burger-icon;

  /* Такой же внутренний отступ, как у колокольчика рядом — чтобы бейдж не прилипал
     к бургеру; отрицательный margin возвращает иконку на край контейнера */
  @include to-br(sm) {
    padding: 8px;
    margin-right: -8px;
  }

  &::after {
    @include area-point;
  }
}

.layout-header__search {
  @include from-br(sm) {
    width: $search-max-width;
    margin-inline: 16px;
    grid-column: 1/-1;
    grid-row: 1;
    justify-self: center;
  }

  @include from-br(md) {
    width: $search-max-width-md;
  }
}

.layout-header__user {
  display: grid;
  place-content: center;
  color: $header-user-icon;
}

.layout-header__user,
.layout-header__sign-up {
  @include from-br(sm) {
    grid-column: 6;
    grid-row: 1;
  }
}

.layout-header__niche {
  @include from-br(sm) {
    grid-column: 3;
    grid-row: 1;
  }
}

.layout-header__loader {
  --size: 20px;

  margin: 0 16px;
}

.layout-header__notifications {
  @include from-br(sm) {
    grid-column: 4;
    grid-row: 1;
  }
}

.layout-header__language {
  @include from-br(sm) {
    position: relative;
    grid-column: 5;
    grid-row: 1;
  }
}

.layout-header__language-trigger{
  @include from-br(sm) {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    padding: 6px 8px;
    gap: 6px;
    color: $header-language-trigger;
  }
}

.layout-header__language-angle {
  transition: transform var(--transition), color var(--transition);
}

.layout-header__language-trigger:hover .layout-header__language-angle {
  color: $header-language-angle--hover;
}

.layout-header__language-trigger.--open .layout-header__language-angle {
  transform: rotate(180deg);
}

.layout-header__language-menu {
  @include from-br(sm) {
    background-color: $header-language-menu-bg;
    border-radius: $radius-xl;
    min-width: 286px;
    border: 1px solid $header-language-menu-border;
    position: absolute;
    right: 0;
    bottom: -8px;
    transform: translateY(100%);
    overflow: hidden;
  }
}

.layout-header__language-menu .layout-language__summary {
  @include hover(background-color) {
    background-color: $header-language-menu-item--hover;
  }
}
</style>
