<template>
  <div v-if="sites.length > 0" class="site-selection">
    <div class="logo">
      <image-ui
        path="logos/logo-cenexi.png"
        :staticImage="true"
        :alt="'Logo cenexi'"
        class="logo"
      />
    </div>

    <div class="wrapper">
      <div class="header">
        <h1>{{ $_tr('title') }}</h1>
      </div>

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

        <div v-else class="sites">
          <div v-for="(site, index) in sites" :key="index" class="item">
            <div v-if="site.image" class="site-logo-container">
              <img
                :src="$_getContentImage(site.image)"
                :alt="site.title"
                @click="attributeSite(site)"
              />
              <p>{{ site.title }}</p>
            </div>
          </div>
        </div>
      </transition>
    </div>
  </div>
</template>

<script>
import SitesMixin from '~instanceCustom/mixins/sites'
import { storage } from '@inside-library/helpers/Storage'
import { Loader } from 'inside-collection/atoms'

export default {
  name: 'site-selection',
  $_i18nRootPath: 'customs.SITE_SELECTION',
  components: { Loader },
  mixins: [SitesMixin],
  data() {
    return {
      sites: [],
      isLoading: true
    }
  },
  async mounted() {
    this.sites = await this.$_fetchUserSites()

    /*
     * Auto attribute a site if it's alone
     */
    if (this.sites.length === 1) {
      this.attributeSite(this.sites[0])
    }

    this.isLoading = false
  },
  methods: {
    attributeSite(site) {
      /*
       * Save in store
       */
      this.setStoreAction('setSpecificUserInfos', {
        key: 'site',
        value: site
      })

      /*
       * Save in local storage
       */
      this.setStoreAction('setUserInformation', { key: 'site', value: site })

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

      if (target) {
        url = target

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

      window.location.href = url
    }
  }
}
</script>

<style lang="scss">
.site-selection {
  font-family: var(--font-secondary);
  margin-top: var(--spacing-3xl);

  .logo {
    text-align: center;
    margin: var(--spacing-xl) 0;
  }

  .header {
    position: relative;

    h1 {
      color: var(--color-primary);
      padding-bottom: var(--spacing-l);

      @include H3;

      &::before {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: var(--spacing-xxl);
        border-bottom: var(--spacing-s) solid var(--dashboard-color-3);
      }
    }
  }

  .wrapper {
    width: 50%;
    margin: auto;

    @include tablet {
      width: 70%;
    }

    .sites {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: center;
      margin-top: var(--spacing-l);

      .item {
        width: calc(50% - var(--spacing-s));
        cursor: pointer;
        overflow: hidden;
        margin-top: var(--spacing-m);

        @include tablet {
          width: 100%;
          height: 100%;
        }
      }

      .item:nth-child(odd) {
        margin-right: var(--spacing-m);

        @include tablet {
          margin-right: 0;
        }
      }

      .site-logo-container {
        position: relative;

        img {
          width: 100%;
        }
      }

      p {
        position: absolute;
        top: var(--spacing-l);
        left: var(--spacing-l);
        color: var(--color-light);

        @include H5;
      }
    }
  }
}
</style>
