<template>
  <transition name="slide-fade">
    <div v-if="getHeaderMobileState" class="mobile-header-layouts">
      <div class="mobile-header-content px-m pt-xxl">
        <Title tag="h1" class="menu-title"> {{ $_tr('title') }} </Title>

        <LinksListingMenuMobile />

        <div v-if="accessToSettings" class="px-m pb-m">
          <IconText
            :color="$_theme('colorAdmin')"
            icon="settings"
            class="settings pt-m"
            @click="redirectTo"
          >
            <BaseText>
              {{ $_tr('settings') }}
            </BaseText>
          </IconText>
        </div>

        <BrandSelector />

        <div class="dashboard-container mt-m">
          <router-link :to="dashboardURL" class="dashboard">
            {{ $_tr('dashboard') }}
          </router-link>
        </div>
      </div>

      <FooterLayouts />
    </div>
  </transition>
</template>

<script>
import { Title, IconText, BaseText } from 'inside-collection/atoms'

import MobileHeaderLayouts from '@inside-layouts/displays/MobileHeaderLayouts'
import LinksListingMenuMobile from '@inside-layouts/components/lib/sub-components/LinksListingMenuMobile'

import BrandSelector from '../../inside-customs/components/brand/BrandSelector'
import FooterLayouts from './FooterLayouts'

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

export default {
  name: 'mobile-header-layouts',
  $_i18nRootPath: 'layouts.MOBILE_HEADER',
  components: {
    LinksListingMenuMobile,
    FooterLayouts,
    BrandSelector,
    Title,
    IconText,
    BaseText
  },
  extends: MobileHeaderLayouts,
  computed: {
    dashboardURL() {
      return formatHref(
        {
          name: 'DashboardSummary'
        },
        this.$_currentLang
      )
    },
    accessToSettings() {
      return !!this.getUserInfos.permissions.backoffice_entries.length
    }
  },
  methods: {
    redirectTo() {
      return this.$router.push(
        formatHref({ name: 'AdminContentsPage' }, this.$_currentLang)
      )
    }
  }
}
</script>

<style lang="scss">
.mobile-header-layouts {
  padding: 0;
  height: 100vh;

  .mobile-header-content {
    justify-content: auto;
    margin-bottom: 0;

    .menu-title {
      text-align: center;
    }

    .settings {
      width: 100%;
      border-top: 1px solid var(--color-grey-300);
    }

    .brand-selector {
      position: relative;
      margin: var(--spacing-m) auto;
    }

    .dashboard-container {
      text-align: center;

      .dashboard {
        padding: var(--spacing-s) calc(var(--spacing-s) + var(--spacing-xs));
        border: 1px solid var(--color-dashboard);
        border-radius: var(--radius-m);
        color: var(--color-dashboard);
      }
    }
  }

  footer {
    margin-bottom: calc(var(--spacing-3xl) * 2) !important;
  }
}
</style>
