<template>
  <div class="custom-shortcuts-container">
    <div class="header mb-m">
      <Title tag="h5">
        {{ $_tr('title') }}
      </Title>

      <router-link :to="profileLink">
        <Icon icon="settings" />
      </router-link>
    </div>

    <component-listing
      v-bind="getAttrs($attrs)"
      id="shortcuts-listing"
      endpoint="content/users"
      :fields="requestFields"
      :filters="{ 'uuid:eq': getUserInfos.uuid }"
      :fractions="1"
      :root-path="rootPath"
      :grid-gap="gridGap"
      loader-box-size="m"
    >
      <template #default="{ item }">
        <ShortcutLink
          v-bind="item"
          :key="item.uuid"
          :link="item.tools_link"
          :icon-color="$_theme('colorPrimary')"
        >
          <BaseText class="ml-s">{{ item.title }}</BaseText>
        </ShortcutLink>
      </template>

      <template #no-data>
        <BaseText>
          {{ $_tr('empty') }}
        </BaseText>
      </template>
    </component-listing>
  </div>
</template>

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

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

import ShortcutLink from '@inside-users/components/sub-components/ShortcutLink'

export default {
  name: 'Shortcuts',
  $_i18nRootPath: 'customs.HOMEPAGE.heromodule.shortcuts',
  components: { Title, Icon, ShortcutLink, BaseText },
  data() {
    const rootPath = this.$_getConfig(
      'profileRedirectionRootPath',
      'inside-users'
    )
    const type = this.$_getConfig('shortcuts.content', 'inside-users')
    const maxShortcuts = this.$_getConfig('shortcuts.max', 'inside-users')

    return {
      type,
      path: this.getCheckedData(rootPath, this.$_currentLang, rootPath.default),
      requestFields: [
        {
          [type]: {
            fields: [
              'uuid',
              'slug',
              'title',
              'icon',
              'class',
              'image',
              'tools_link',
              'has_section',
              'content_type'
            ],
            filters: { limit: maxShortcuts, 'status:eq': 1 }
          }
        }
      ],
      rootPath: `data[0].${type}`,
      gridGap: this.$_theme('spacingS')
    }
  },
  computed: {
    profileLink() {
      return formatHref({ name: 'ProfileShortcuts' }, this.$_currentLang)
    }
  },
  methods: { getAttrs }
}
</script>

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

.custom-shortcuts-container {
  width: 45%;

  @include mobile {
    width: 100%;
    margin-bottom: var(--spacing-l);
  }

  .header,
  .shortcut-link-container {
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;

    .media img {
      max-width: 24px;
      max-height: 24px;
    }
  }
}
</style>
