<template>
  <header>
    <header-burger v-if="getTablet" />

    <router-link to="/" class="header__logo">
      <div
        v-if="isSvg($_getContentImage(iconPath))"
        class="brand-icon-container header__logo-main"
        v-html="$_getContentImage(iconPath)"
      />

      <div v-else class="brand-icon-container header__logo-main icon">
        <img :src="$_getContentImage(iconPath)" alt="Logo" />
      </div>

      <div
        v-if="isSvg($_getContentImage(logoPath))"
        class="brand-logo-container header__logo-main"
        v-html="$_getContentImage(logoPath)"
      />

      <div v-else class="brand-logo-container header__logo-main desktop">
        <img :src="$_getContentImage(logoPath)" alt="Logo" />
      </div>

      <img
        src="@inside-customs/assets/img/logos/brand-center.png"
        alt="Logo"
        class="header__logo-aside"
      />
    </router-link>

    <transition name="fadeIn">
      <main-searches
        v-if="$store.getters.getSearchOpen"
        :herited-options="{ commons: { module: 'inside-search' } }"
      />
    </transition>

    <div class="header__right df-center-y">
      <LinksListingMenu v-if="!getTablet && useMenu" />

      <div class="header__user-action df-center-y">
        <router-link :to="searchURL">
          <Icon :aria-label="$_tr('altIconSearch')" icon="search" />
        </router-link>

        <Link :href="cartURL" :inline="false">
          <svg v-html="basketDecoded" width="24" height="24" />

          <div v-if="getCartCounter" class="cart-counter">
            <span>{{ getCartCounter }}</span>
          </div>
        </Link>

        <HeaderNotifications />

        <Link :href="bookmarksURL" :inline="false">
          <svg v-html="bookmarkDecoded" width="24" height="24" />
        </Link>

        <div v-if="!getTablet" class="brand-selector__wrapper">
          <BrandSelector />
        </div>

        <router-link
          v-if="!getTablet && $_checkDashboardAccess()"
          :to="dashboardURL"
          class="dashboard"
        >
          {{ $_tr('dashboard') }}
        </router-link>

        <router-link
          v-if="!getTablet && isSuperAdmin"
          :to="{ name: 'AdminHomePage' }"
          class="admin"
        >
          <Icon
            :aria-label="$_tr('altIconSettings')"
            :color="$_theme('colorDashboard')"
            icon="settings"
          />
        </router-link>
      </div>

      <LangsUi v-if="displayLangChange" class="ml-l" />
    </div>
  </header>
</template>

<script>
import { Icon } from 'inside-collection/atoms'
import { Link } from 'inside-collection/components'

import { http } from '@inside-library/helpers/Http'
import { storage } from '@inside-library/helpers/Storage'
import { formatHref } from '@inside-library/helpers/Langs'
import { getAppInstance } from '@inside-core/helpers/getAppInstance'

import HeaderLayouts from '@inside-layouts/displays/HeaderLayouts'
import HeaderNotifications from '@inside-notifications/components/lib/Header'
import LinksListingMenu from '@inside-layouts/components/lib/sub-components/LinksListingMenu'
import LangsUi from '@inside-ui/LangsUi'

import BrandSelector from '../../inside-customs/components/brand/BrandSelector'
import checkDashboardAccess from '../../inside-customs/mixins/check-dashboard-access'

import { LHG_GROUP_CODE } from '../../inside-customs/constants'

import bookmark from '../../inside-customs/assets/icons-v2/bookmark-page.svg'
import basket from '../../inside-customs/assets/icons-v2/basket.svg'

export default {
  name: 'header-layouts',
  $_i18nRoothPath: 'overrides.header',
  components: {
    BrandSelector,
    HeaderNotifications,
    Icon,
    LangsUi,
    Link,
    LinksListingMenu
  },
  extends: HeaderLayouts,
  mixins: [checkDashboardAccess],
  data() {
    return {
      iconPath: '',
      logoPath: '',
      useMenu: true,
      bookmarkDecoded: decodeURIComponent(
        bookmark.replace('data:image/svg+xml,', '')
      ),
      basketDecoded: decodeURIComponent(
        basket.replace('data:image/svg+xml,', '')
      )
    }
  },
  computed: {
    displayLangChange() {
      return (
        this.$store.getters.getInsideSettings(
          'multilingual.language_button_placement'
        ) === 'navbar'
      )
    },
    searchURL() {
      return formatHref(
        {
          name: 'SolrSearchesPage'
        },
        this.$_currentLang
      )
    },
    getCartCounter() {
      return this.$store.getters.getCartCounter
    },
    bookmarksURL() {
      return formatHref(
        {
          name: 'Bookmarks'
        },
        this.$_currentLang
      )
    },
    cartURL() {
      return formatHref(
        {
          name: 'Cart'
        },
        this.$_currentLang
      )
    },
    dashboardURL() {
      return formatHref(
        {
          name: 'DashboardSummary'
        },
        this.$_currentLang
      )
    }
  },
  watch: {
    $_currentLang() {
      if (this.getCurrentPath === '/') {
        window.location.reload()
      }
    }
  },
  mounted() {
    const app = getAppInstance()

    app.config.globalProperties.updateBrandStyle()

    setTimeout(() => {
      if (storage.get('brand')) {
        this.iconPath = storage.get('brand').menu_icon
        this.logoPath = storage.get('brand').brand_logo

        if (storage.get('brand').code === LHG_GROUP_CODE) {
          this.useMenu = false
        }
      }
    }, 120)

    this.fetchCartCounter()
  },
  methods: {
    async fetchCartCounter() {
      try {
        const { count } = await http.get(
          `users/reactions/basket/${this.getUserInfos.uuid}`,
          {
            fields: ['count']
          }
        )

        this.$store.commit('updateCartCounter', {
          remove: false,
          sum: count,
          init: true
        })
      } catch (err) {
        throw new Error(err)
      }
    },
    isSvg(img) {
      if (img) {
        return img.indexOf('<svg') > -1
      }
      return img
    }
  }
}
</script>

<style lang="scss">
@use '@inside-library/styles/mixins/partials/common-mixin' as *;

header {
  min-height: 75px;

  .header__logo {
    @include custom-break-between(1150px, 960px) {
      max-width: 110px;
    }

    img {
      width: initial;
      max-height: 60px;
      max-width: 100px;

      @include mobile {
        max-width: 70px;
      }

      &.header__logo-aside {
        width: 12rem;

        @include custom-break(390px) {
          width: 10rem;
        }
      }
    }
  }

  div.header__logo-main {
    display: none;

    &.brand-icon-container {
      svg {
        width: 36px;
        height: 28px;
      }

      @include desktop {
        display: flex;
        align-items: center;
        flex-shrink: 0;
      }
    }

    &.brand-logo-container {
      svg {
        width: 100%;
        height: 100%;
      }

      img {
        max-height: 35px;
        align-self: center;

        @include custom-break-min(1101px) {
          max-width: 160px;
        }
      }

      @include custom-break-min(1101px) {
        position: relative;
        display: flex;
        text-align: right;
        height: 35px;
        min-width: auto;
      }
    }
  }

  @include tablet {
    justify-content: flex-start;

    div.header__burger__container {
      width: inherit !important;
    }

    a.header__logo {
      width: 30rem;
    }

    div.header__right {
      width: 100%;
    }
  }

  @include mobile {
    div.header__right {
      width: 30%;
    }
  }
}

$menu-spacing: 2rem;

.header__logo {
  position: relative;
  display: flex;
  align-items: center;

  img {
    vertical-align: middle;
  }

  &-main {
    height: 2.8rem;

    @include tablet {
      height: 2rem;
    }
  }

  &-aside {
    margin-left: 1rem;
    padding-left: 1rem;
    border-left: 0.2rem solid var(--color-dark);

    @include small-desktop {
      max-width: 100px;
    }
  }
}

div.header__user-action {
  position: relative;
  margin-left: $menu-spacing;

  & > div,
  & > a {
    margin-right: 1.4rem;

    @include mobile {
      margin-right: 1rem;
    }
  }

  a {
    position: relative;

    @include mobile {
      font-size: var(--font-size-h4);
    }

    svg {
      fill: var(--color-text);

      @include transition(fill 0.3s);
    }
  }

  .cart-counter {
    $size: 1.3rem;

    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    justify-content: center;
    min-width: $size;
    min-height: $size;
    line-height: $size;
    background-color: var(--color-primary);
    color: var(--color-light);
    font-size: 8px;
    border-radius: 50%;
    transform: translateX(50%);
  }

  .brand-selector__wrapper {
    position: relative;
    width: 5.4rem;
    height: 3rem;
  }
}

div.header__user-action > a.dashboard {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 3rem;
  padding: 0 var(--spacing-s);
  border: 1px solid var(--color-dashboard);
  border-radius: var(--radius-m);
  color: var(--color-dashboard);
  transition: all 0.3s ease;
  text-transform: uppercase;
  font-size: 12px;
}

div.notifications-header-container > div .ds-icon-container {
  fill: var(--color-text);
}
</style>
