<template>
  <div
    class="list-ged__wrapper"
    :class="{
      'list-ged__wrapper--underlined': hasDeclinedDocuments || hasRops,
      'list-ged--declension': isDeclension
    }"
  >
    <ul
      :data-list-ged="heritedData.uuid"
      class="list-ged list-ged--master"
      @click="goTo(heritedData)"
    >
      <li class="list-ged__title">
        <Icon
          :aria-label="$_tr('altIconArrowLink')"
          :color="isRop ? brandPrimaryColor : brandSecondaryColor"
          icon="arrow-link"
          size="xs"
        />

        <p v-html="heritedData.title" />
      </li>

      <template v-if="!getTablet">
        <li>
          <template v-if="!isFolder">
            <FormattedReferences
              :disable-click="true"
              :list-data="heritedData.countries.data"
              :limit="2"
              :total="heritedData.countries.total"
            />
          </template>
        </li>

        <date-ui
          :date="heritedData.updated_at || heritedData.published_at"
          :relative="true"
          tag="li"
        />
      </template>

      <li class="list-ged__actions">
        <Icon
          v-if="isFolder"
          :aria-label="$_tr('altIconArrowRight')"
          icon="arrow-right"
          size="xs"
        />

        <Icon
          v-else
          :aria-label="$_tr('altIconEyeOn')"
          icon="eye-on"
          size="xs"
        />

        <EditContentButton
          v-if="getCheckedData(heritedData, ['admin', 'permission', 'update'])"
          :edition-link="getEditionLink(heritedData)"
        />
      </li>
    </ul>

    <template v-if="hasDeclinedDocuments || hasRops">
      <ul
        v-for="declension in getDeclensions()"
        :key="`ged-declension-${declension.uuid}`"
        :data-list-ged="heritedData.uuid"
        class="list-ged list-ged--declension"
        @click="goTo(declension)"
      >
        <li class="list-ged__title">
          <Icon
            :aria-label="$_tr('altIconArrowLink')"
            :color="brandPrimaryColor"
            icon="arrow-link"
            size="xs"
          />

          <p>{{ unescapeHtml(declension.title) }}</p>
        </li>

        <template v-if="!getTablet">
          <li>
            <template v-if="!isFolder">
              <FormattedReferences
                :disable-click="true"
                :list-data="declension.countries.data"
                :limit="2"
                :total="heritedData.countries.total"
              />
            </template>
          </li>

          <date-ui
            tag="li"
            :date="declension.updated_at || declension.published_at"
            :relative="true"
          />
        </template>

        <li class="list-ged__actions">
          <Icon :aria-label="$_tr('altIconEyeOn')" icon="eye-on" size="xs" />

          <EditContentButton
            v-if="
              getCheckedData(heritedData, ['admin', 'permission', 'update'])
            "
            :edition-link="getEditionLink(declension)"
          />
        </li>
      </ul>
    </template>
  </div>
</template>

<script>
import { Icon } from 'inside-collection/atoms'
import EditContentButton from '@inside-library/components/ui/EditContentBtnUi'

import RequestMixin from '@inside-library/mixins/request-mixin'
import DownloadFileMixin from '@inside-library/mixins/download-file-mixin'
import FileMixin from '@inside-library/mixins/file-mixin'

import { formatHref } from '@inside-library/helpers/Langs'
import { storage } from '@inside-library/helpers/Storage'
import { unescapeHtml } from '@inside-library/filters/UnescapeHtml'

import FormattedReferences from '../../../FormattedReferences'
import GedNavigationMixin from '../../mixins/ged-navigation-mixin'
import GedDateMixin from '../../mixins/ged-date-mixin'

export default {
  name: 'ListGed',
  $_i18nRootPath: 'customs.GED.card',
  components: { FormattedReferences, EditContentButton, Icon },
  mixins: [
    RequestMixin,
    DownloadFileMixin,
    GedNavigationMixin,
    GedDateMixin,
    FileMixin
  ],
  props: {
    albumData: {
      type: Array
    },
    index: {
      type: Number
    },
    isDeclension: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    getCurrentFolder() {
      return this.$store.getters.getCurrentFolder
    },
    isFolder() {
      return this.heritedData.content_type.indexOf('folders') > -1
    },
    isDocument() {
      return this.heritedData.content_type.indexOf('documents') > -1
    },
    hasDeclinedDocuments() {
      return this.isAlive(this.heritedData, ['declined_documents', 'data', 0])
    },
    hasRops() {
      return this.isAlive(this.heritedData, ['rops', 'data', 0])
    },
    isRop() {
      return this.heritedData.content_type === 'rops'
    },
    declensionsName() {
      return this.hasDeclinedDocuments ? 'declined_documents' : 'rops'
    },
    brandPrimaryColor() {
      return storage.get('brand')?.primary_color
    },
    brandSecondaryColor() {
      return storage.get('brand')?.secondary_color
    }
  },
  methods: {
    unescapeHtml,
    updateFolder() {
      const params = {
        data: this.heritedData,
        slug: this.heritedData.slug[0]
      }

      this.requestFolder(params)
    },
    goTo(item) {
      if (item.content_type.indexOf('folders') > -1) {
        this.updateFolder()
      } else {
        this.$store.commit('setCurrentModalContentType', item.content_type)

        this.$router.replace(
          formatHref(
            {
              name: 'ModalDocument',
              params: {
                folder:
                  this.getCurrentFolder?.parent_tree?.folders?.uuid ||
                  this.$route.params.folder,
                subFolder: this.getCurrentFolder?.slug[0],
                document: item.slug[0]
              }
            },
            this.$_currentLang
          )
        )
      }
    },
    getDeclensions() {
      return this.hasDeclinedDocuments
        ? this.heritedData.declined_documents.data
        : this.heritedData.rops.data
    },
    getEditionLink(item) {
      return {
        name: 'Edition',
        params: {
          content: item.content_type,
          uuid: item.uuid
        }
      }
    }
  }
}
</script>

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