<template>
  <div v-if="parentData" class="full-ged">
    <template v-if="getGEDHome">
      <BreadcrumbGed :title="title" />

      <transition name="fadeIn" mode="out-in">
        <div class="full-ged__header">
          <Title tag="h1">{{ title }}</Title>

          <BaseText class="mt-m">{{ description }}</BaseText>

          <DownloadEbookButton
            v-if="machineName === 'sops'"
            :brand="brand.uuid"
            :folder="getCheckedData(storedCurrentFolder, 'uuid')"
            class="mt-m"
          />
        </div>
      </transition>
    </template>

    <transition name="fadeIn" mode="out-in">
      <div v-if="!getGEDHome" :key="1">
        <div
          :class="machineName === 'sops' && 'sops-banner'"
          class="full-ged__header--bg py-xl"
        >
          <Title v-if="storedCurrentFolder" tag="h1" :dark-mode="true">
            {{ storedCurrentFolder.title }}
          </Title>

          <DownloadEbookButton
            v-if="machineName === 'sops' && storedCurrentFolder"
            :brand="brand.uuid"
            :folder="storedCurrentFolder.uuid"
            class="mt-l"
          />
        </div>

        <div class="full-ged__content">
          <SidebarGed v-if="!getTablet" :heritedData="currentData" />

          <div class="full-ged__content-right">
            <FileNavGed
              :heritedData="currentData"
              :disableToggleDisplay="disableToggleDisplayByFolders"
              :results="results"
            />
          </div>

          <transition name="fadeIn">
            <div
              v-if="getLoadingGEDStatus"
              class="full-ged__content__loader df-center-xy"
            >
              <loader-ui />
            </div>
          </transition>
        </div>
      </div>

      <div
        v-else
        :key="2"
        class="full-ged__content full-ged__content__root-folder"
      >
        <GedCard
          v-for="card in currentData"
          :key="card.uuid"
          :heritedData="card"
          :background="$_getContentImage(card.image)"
          :color="card.color"
          @click.native="goToFolder(card)"
        />
      </div>
    </transition>

    <transition name="fadeIn">
      <GalleryUi
        v-if="
          $store.getters.getPreviewGEDInfos &&
          $store.getters.getPreviewGEDInfos.status
        "
        :heritedData="folderData"
        :gallery-data="$store.getters.getPreviewGEDInfos.data"
        :openedIndex="$store.getters.getPreviewGEDInfos.index"
      />
    </transition>
  </div>
</template>

<script>
import DownloadEbookButton from '../../../inside-customs/components/ged/DownloadEbookButton'
import BreadcrumbGed from '../../../inside-customs/components/ged/sub-components/BreadcrumbGed'
import FileNavGed from '../../../inside-customs/components/ged/sub-components/FileNavGed'
import SidebarGed from '../../../inside-customs/components/ged/sub-components/SidebarGed'
import GedCard from '../../../inside-customs/components/ged/sub-components/GedCard'

import FieldSearchRequest from '@inside-searches/displays/field/FieldSearchRequest'
import GalleryUi from '@inside-library/components/ui/GalleryUi'
import { Title, BaseText } from 'inside-collection/atoms'

import GedNavigationMixin from './mixins/ged-navigation-mixin'
import InterpretedDataMixin from '@inside-library/mixins/interpreted-data'

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

import { CONTENTS } from '../../constants/ged-contents'

export default {
  name: 'FullGed',
  $_i18nRootPath: 'customs.GED.full',
  components: {
    FileNavGed,
    SidebarGed,
    FieldSearchRequest,
    BreadcrumbGed,
    GedCard,
    DownloadEbookButton,
    GalleryUi,
    Title,
    BaseText
  },
  mixins: [GedNavigationMixin, InterpretedDataMixin],
  props: {
    folderTypes: {
      type: Object,
      default: () => CONTENTS().folders
    },
    documentTypes: {
      type: Object,
      default: () => CONTENTS().documents
    },
    cardsDisplay: {
      type: Boolean,
      default: true
    },
    folderData: {
      type: Array
    },
    parentData: {
      type: Object
    }
  },
  data() {
    return {
      currentData: this.folderData,
      title: this.parentData.title,
      machineName: this.parentData.machine_name,
      ebookGenerationStatus: null,
      results: [],
      gedOptions: null
    }
  },
  computed: {
    storedCurrentFolder() {
      return this.$store.getters.getCurrentFolder
    },
    contentTypes() {
      return [this.documentTypes.contents, this.folderTypes.contents]
    },
    searchFields() {
      try {
        const fields = this.folderTypes.fields
          .filter(
            field =>
              typeof field === 'object' &&
              this.contentTypes.includes(Object.keys(field)[0])
          )
          .map(item => Object.values(item)[0].fields)
        const flattenFields = fields.flat()

        return [...new Set(flattenFields)]
      } catch (err) {
        return []
      }
    },
    searchPlaceholder() {
      return this.$_tr('search.placeholder')
    },
    description() {
      return storage.get('brand')[`${this.machineName}_description`]
    },
    getCurrentFolder() {
      return this.$route.params.subFolder
    },
    getLoadingGEDStatus() {
      return this.$store.getters.getLoadingGEDStatus
    },
    brand() {
      return storage.get('brand')
    },
    disableToggleDisplayByFolders() {
      return this.$store.getters
        .getInsideSettings(
          `general.disable_toggle_display_${this.$_currentLang}`
        )
        .split(',')
        .includes(this.parentData?.title)
    }
  },
  created() {
    this.gedOptions = {
      cardsDisplay: this.cardsDisplay,
      disableToggleDisplay: this.disableToggleDisplayByFolders,
      documentModel: this.documentTypes.contents[0],
      folderModel: this.folderTypes.contents[0],
      hasImage: false
    }
  },
  beforeMount() {
    this.setStoreAction('setRootData', this.folderData)

    this.setStoreAction('setFullGedCustom', this.gedOptions)

    if (this.$route.params.subFolder && this.folderData) {
      this.setStoreAction('setGEDHome', false)

      this.requestFolder({
        data: {
          slug: this.$route.params.subFolder
        }
      })
    } else {
      this.setStoreAction('setGEDHome', true)

      this.setStoreAction('setCurrentFolder', null)
    }
  },
  beforeUnmount() {
    this.setStoreAction('setCurrentHashGed', '')
  },
  methods: {
    defineAction() {
      this.setStoreAction('setCurrentFolder', this.folderData[0])
    },
    setSearch(value) {
      this.results = value[0].data
      this.setStoreAction('setLoadingGEDStatus', false)
    },
    resetSearch() {
      this.results = []
      this.setStoreAction('setGEDSearchStatus', false)
    },
    goToFolder(card) {
      this.$router.push(
        formatHref(
          {
            name: 'GedPageCustom',
            params: {
              folder: this.$route.params.folder,
              subFolder: card.slug[0]
            }
          },
          this.$_currentLang
        )
      )
    }
  }
}
</script>

<style lang="scss">
@use '../../styles/modules/inside-customs/ged/full.scss' as *;
@use '@inside-library/components/ui/styles/loader.scss' as *;
</style>
