<template>
  <div v-if="foldersList.length">
    <transition v-if="foldersList.length" name="fadeIn" mode="out-in">
      <div class="sop-folders-listing-container">
        <FolderItem
          v-for="folder in foldersList"
          :key="folder.uuid"
          :folder="folder"
          :parent="parentFolder"
        />
      </div>
    </transition>

    <BaseText v-else>
      {{ $_tr('empty') }}
    </BaseText>
  </div>
</template>

<script>
import { http } from '@inside-library/helpers/Http'

import { BaseText } from 'inside-collection/atoms'

import FolderItem from './sub-components/FolderItem'

export default {
  name: 'SopFoldersListing',
  $_i18nRootPath: 'customs.SHORTCUTS_USERS',
  components: { BaseText, FolderItem },
  data() {
    return {
      foldersList: [],
      parentFolder: null
    }
  },
  computed: {
    sopFolderTitle() {
      return this.$store.getters.getInsideSettings(
        `general.sop_folder_${this.$_currentLang}_title`
      )
    }
  },
  async beforeMount() {
    this.foldersList = await this.fetchFolders()
  },
  methods: {
    async fetchFolders() {
      try {
        const { data: sopFolder } = await http.get('content/folders', {
          fields: ['uuid', 'title', 'slug'],
          filters: { 'title:eq': this.sopFolderTitle }
        })

        this.parentFolder = sopFolder[0].slug[0]

        const { data: folders } = await http.get('content/folders', {
          fields: [
            'uuid',
            'title',
            'slug',
            'admin',
            'content_type',
            'published_at',
            'count',
            'image',
            'svg',
            { pid: ['uuid'] }
          ],
          filters: { 'pid:eq': sopFolder[0].uuid, sort: 'weight:asc' }
        })

        return folders
      } catch (err) {
        throw new Error(err)
      }
    }
  }
}
</script>

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

.sop-folders-listing-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--spacing-m);

  @include mobile {
    grid-template-columns: repeat(auto-fill, minmax(100%, 1fr));
  }
}
</style>
