<template>
  <div>
    <div
      v-for="folder in folders"
      :key="folder.uuid"
      :style="{ backgroundImage: image(folder.image) }"
      class="folder-block-container"
    >
      <FolderBlockItem :folder="folder" class="p-xxl" />
    </div>
  </div>
</template>

<script>
import FolderBlockItem from './FolderBlockItem'

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

export default {
  name: 'FolderBlock',
  components: { FolderBlockItem },
  data() {
    return {
      folders: []
    }
  },
  computed: {
    folderInBlock() {
      return this.$store.getters.getInsideSettings(
        `homepage.folders_on_${this.$_currentLang}_homepage`
      )
    }
  },
  async beforeMount() {
    this.folders = await this.fetchFolders()
  },
  methods: {
    async fetchFolders() {
      try {
        const { data: folders } = await http.get('content/folders', {
          fields: [
            'uuid',
            'title',
            'slug',
            'admin',
            'content_type',
            'published_at',
            'image'
          ],
          filters: { 'pid:eq': null, sort: 'weight:asc' }
        })

        return folders.filter(folder =>
          this.folderInBlock.includes(folder.title)
        )
      } catch (err) {
        throw new Error(err)
      }
    },
    image(image) {
      return `url('${this.$_getContentImage(image, 'main')}')`
    }
  }
}
</script>

<style lang="scss" scoped>
.folder-block-container {
  background-repeat: no-repeat;
  background-position: 172px 62%;
  display: flex;
  align-items: center;
}
</style>
