<template>
  <li
    class="folder-ged"
    :class="[
      { 'folder-ged--media': folderData.is_media_folder },
      { 'folder-ged--active': isActive }
    ]"
    :data-list-folder="folderData.uuid"
  >
    <div class="folder-ged__title df-center-y" @click="openFolder">
      <i
        v-if="getCheckedData(getChildrenData, [0]) || isChildrenActive"
        class="sid2-arrow"
        :class="
          (showChildren && isActive) || isChildrenActive ? 'arrow-rotate' : ''
        "
        @click="openTree"
      />

      <BaseText>{{ unescapeHtml(folderData.title) }}</BaseText>
    </div>

    <transition name="fadeIn">
      <div
        v-if="(isActive && showChildren && getChildrenData) || isChildrenActive"
        class="folder-ged__sub"
      >
        <folder-ged
          v-for="folder in getChildrenData"
          :key="folder.uuid"
          :folder-data="folder"
          :heritedOptions="{ parent: folderData.uuid }"
        />
      </div>
    </transition>
  </li>
</template>

<script>
import { storage } from '@inside-library/helpers/Storage'
import { unescapeHtml } from '@inside-library/filters/UnescapeHtml'

import GedNavigationMixin from '../mixins/ged-navigation-mixin'

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

export default {
  name: 'FolderGed',
  components: { BaseText },
  mixins: [GedNavigationMixin],
  props: {
    folderData: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      childrenData: null,
      showChildren: false
    }
  },
  computed: {
    params() {
      return {
        data: this.folderData,
        slug: this.folderData.slug[0]
      }
    },
    getCurrentFolder() {
      return this.$store.getters.getCurrentFolder
    },
    getCurrentColor() {
      return this.folderData.color || this.heritedOptions.parentColor
    },
    getChildrenData() {
      if (
        !this.isAlive(this.folderData, [
          this.getCurrentContentType('folders'),
          'data',
          '0'
        ])
      ) {
        return []
      }

      return this.folderData[this.getCurrentContentType('folders')].data
        .filter(folder => {
          return (
            !folder.is_media_folder ||
            storage.get('brand').uuid ===
              this.getCheckedData(folder, ['brands', 'data', 0, 'uuid'])
          )
        })
        .sort((a, b) => {
          if (a.title < b.title) {
            return -1
          }
          if (a.title > b.title) {
            return 1
          }
          return 0
        })
    },
    isActive() {
      return (
        this.$store.getters.getCurrentFolder?.slug[0] ===
        this.folderData.slug[0]
      )
    },
    isChildrenActive() {
      return this.$store.getters.getCurrentFolder?.parent_tree?.folders?.find(
        el => el.slug[0] === this.folderData.slug[0]
      )
    }
  },
  methods: {
    unescapeHtml,
    openFolder() {
      this.requestFolder(this.params)
    },
    openTree() {
      if (this.getChildrenData.length > 0) {
        this.get(`content/${this.getCurrentContentType('folders')}`, {
          params: {
            filters: JSON.stringify({
              slug: this.params.data.slug[0],
              langcode: this.$_currentLang,
              status: 1
            }),
            fields: JSON.stringify(this.getSidebarFields())
          }
        }).then(res => {
          if (res.status === 200) {
            this.showChildren = !this.showChildren
          }
        })
      }
    }
  }
}
</script>

<style lang="scss">
@use '../../../styles/modules/inside-customs/ged/folder.scss' as *;
</style>
