<template>
  <div v-if="brands.length > 0" class="brand-selection">
    <h1>{{ $_tr('title') }}</h1>

    <div class="brand-selection__wrapper">
      <h2>{{ $_tr('subtitle') }}</h2>

      <transition name="fadeIn" mode="out-in">
        <loader-ui v-if="isLoading" />

        <div v-else class="brands">
          <div
            v-for="(brand, index) in brands"
            :key="index"
            class="brands__item"
          >
            <div
              v-if="isSvg($_getContentImage(brand.brand_logo))"
              class="brand-logo-container desktop"
              @click="attributeBrand(brand)"
              v-html="$_getContentImage(brand.brand_logo)"
            />

            <div v-else class="brand-logo-container desktop">
              <img
                :src="$_getContentImage(brand.brand_logo)"
                :alt="brand.title"
                @click="attributeBrand(brand)"
              />
            </div>
          </div>
        </div>
      </transition>
    </div>
  </div>
</template>

<script>
import BrandsMixin from '~instanceCustom/mixins/brands'

import { storage } from '@inside-library/helpers/Storage'
import { formatHref } from '@inside-library/helpers/Langs'

import { LHG_GROUP_CODE } from '../../constants'

export default {
  name: 'BrandSelection',
  $_i18nRootPath: 'customs.BRAND_SELECTION',
  mixins: [BrandsMixin],
  data() {
    return {
      brands: [],
      isLoading: true
    }
  },
  async mounted() {
    this.brands = await this.getBrands()

    if (this.brands.length === 1) {
      this.attributeBrand(this.brands[0])
    }

    this.isLoading = false
  },
  methods: {
    /*
     * Attribute a brand to the user (register in session) and redirect to the homepage
     *
     * @param {Object} brand
     */
    attributeBrand(brand) {
      /*
       * Save in store
       */
      this.setStoreAction('setSpecificUserInfos', {
        key: 'brand',
        value: brand
      })

      /*
       * Save in local storage
       */
      storage.set('brand', brand)

      const target = storage.get('target-brand-page')
      let url = '/'

      if (brand.code === LHG_GROUP_CODE) {
        this.$router.push(
          formatHref(
            {
              name: 'LHGPage'
            },
            this.$_currentLang
          )
        )
      } else {
        if (target) {
          url = target

          storage.remove('target-page')
          storage.remove('target-brand-page')
        }

        window.location.href = url
      }
    },
    /*
     * Helper function to show brands logo
     *
     * @param {String} img
     */
    isSvg(img) {
      if (img) {
        return img.indexOf('<svg') > -1
      }
      return img
    }
  }
}
</script>

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

.brand-selection {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  color: var(--color-text);

  h1 {
    font-weight: var(--font-weight-bold);

    @include fontSize(41);
  }

  svg {
    max-height: 100px;
  }

  &__wrapper {
    position: relative;
    width: 90%;
    margin-top: var(--spacing-xl);
    padding: calc(var(--spacing-xl) + var(--spacing-s));
    max-width: 1030px;
    text-align: center;
    border: 0.1rem solid var(--color-grey);
    border-radius: 1.6rem;
    transition: all 0.3s ease;

    h2 {
      position: absolute;
      top: 0;
      left: 50%;
      width: max-content;
      padding: 0 2.5rem;
      max-width: 80%;
      font-weight: 600;
      transform: translate(-50%, -50%);
      background-color: var(--color-light);

      @include fontSize(20);
    }

    .loader-ui {
      margin-top: var(--spacing-xxl);
      padding-top: var(--spacing-s);
      width: 100%;
      max-width: 100%;
    }

    .brands {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: center;

      &__item {
        cursor: pointer;
        width: 28%;
        margin: 2.5rem 0;
        min-height: 2rem;
        max-height: 11rem;
      }
    }
  }

  .brand-logo-container {
    max-width: 180px;
    margin: auto;
  }
}
</style>
