<template>
  <div v-if="modalData" class="doc-ged-modal">
    <div class="modal__header">
      <Icon
        :color="$_theme('colorLight')"
        icon="close"
        size="m"
        class="close-icon mt-l mr-l"
        @click="goBack"
      />

      <Title :dark-mode="true" tag="h1">{{ modalData.title }}</Title>
    </div>

    <div ref="body" class="modal__body">
      <div class="modal__body__actions">
        <bookmark-ui
          v-if="isAlive(modalData, ['reactions', 'data'])"
          :heritedData="{
            type: 'bookmark',
            related_uuid: modalData.uuid,
            related_type: modalData.content_type,
            reactions: modalData.reactions
          }"
        />

        <ReportAction
          :uuid="modalData.uuid"
          :content-type="modalData.content_type"
        />

        <Print :content-type="modalData.content_type" :uuid="modalData.uuid" />

        <Link
          v-if="getCheckedData(modalData, ['admin', 'permission', 'update'])"
          :href="editionLink"
          :inline="false"
        >
          <Icon :color="$_theme('colorAdmin')" icon="edit" />
        </Link>
      </div>

      <div
        v-if="getCheckedData(modalData, ['introduction'])"
        class="modal__body--intro"
      >
        <Title tag="h1" class="title bold">{{ $_tr('introduction') }}</Title>

        <WysiwygBlock>
          {{ modalData.introduction }}
        </WysiwygBlock>
      </div>

      <template v-if="showDocumentInfos">
        <div
          v-for="type in ['goal', 'standard']"
          :key="type"
          class="modal__body__section"
        >
          <TitleGed class="modal__body__section--title">
            {{ $_tr(`titles.${type}`) }}
          </TitleGed>

          <WysiwygBlock
            v-if="isAlive(modalData, type)"
            class="modal__body__section--content default-text"
          >
            {{ modalData[type] }}
          </WysiwygBlock>
        </div>
      </template>

      <div v-if="showDocumentInfos" class="modal__body__section">
        <TitleGed class="modal__body__section--title">
          {{ $_tr('titles.process') }}
        </TitleGed>

        <div
          v-if="showDocumentInfos && isAlive(modalData, ['file', 'path'])"
          class="modal__body-files"
        >
          <FileParagraph
            v-if="modalData.file"
            :heritedData="{
              file: {
                uuid: modalData.uuid,
                title: modalData.file.title || modalData.file.basename,
                file: modalData.file,
                reactions: modalData.reactions
              },
              domain: 'contents',
              contentType: modalData.content_type
            }"
            :heritedOptions="{ template: true }"
          />
        </div>
      </div>

      <div class="modal__body-text default-text">
        <ParagraphListing
          :heritedData="modalData.content"
          :heritedOptions="{ template: true }"
        />
      </div>

      <Infos
        v-if="showDocumentInfos"
        v-bind="infosData"
        class="modal__body--infos"
      />
    </div>
  </div>
</template>

<script>
import ReportAction from '@inside-library/components/actions/report/ReportAction'

import ParagraphListing from '../../../../inside-overrides/inside-library/listing/ParagraphListing'
import FileParagraph from '../../../../inside-overrides/inside-library/paragraphs/FileParagraph'
import Print from '../../Print'
import TitleGed from '../sub-components/content/Title'
import Infos from '../sub-components/content/Infos'

import { Icon, Title } from 'inside-collection/atoms'
import { Link } from 'inside-collection/components'

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

import WysiwygBlock from '@inside-wysiwyg/components/lib/WysiwygBlock'

export default {
  name: 'GedModal',
  $_i18nRootPath: 'customs.GED.docGed',
  components: {
    Icon,
    Title,
    Link,
    Print,
    ParagraphListing,
    FileParagraph,
    ReportAction,
    TitleGed,
    Infos,
    WysiwygBlock
  },
  data() {
    return {
      modalData: null
    }
  },
  computed: {
    infosData() {
      return {
        countries: this.modalData.countries,
        users: this.modalData.users,
        managementModes: this.modalData.management_modes,
        brands: this.modalData.brands
      }
    },
    showDocumentInfos() {
      return (
        this.modalData.content_type === 'sops' ||
        this.modalData.content_type === 'rops' ||
        this.modalData.content_type === 'procedures'
      )
    },
    editionLink() {
      return {
        name: 'Edition',
        params: {
          content: this.modalData.content_type,
          uuid: this.modalData.uuid
        }
      }
    }
  },
  watch: {
    $route() {
      this.goBack()
    }
  },
  async beforeMount() {
    this.modalData = await this.fetchModalData()

    if (!this.modalData) {
      this.$router.push(
        formatHref(
          {
            name: 'GedPageCustom',
            params: {
              folder: this.$route.params.folder,
              subFolder: this.$route.params.document
            }
          },
          this.$_currentLang
        )
      )
    }
  },
  methods: {
    goBack() {
      this.$router.push(
        formatHref(
          this.$route.meta.content === 'procedures'
            ? {
                name: 'LHGPage'
              }
            : {
                name: 'GedPageCustom',
                params: {
                  folder: this.$route.params.folder,
                  subFolder: this.$route.params.subFolder
                }
              },
          this.$_currentLang
        )
      )
    },
    async fetchModalData() {
      const contentType = 'documents,declined_documents,sops,rops,procedures'

      try {
        const { data } = await http.get(`content/${contentType}`, {
          fields: [
            'content',
            'body',
            'content_type',
            'published_at',
            'file',
            'introduction',
            'langcode',
            'pid',
            'status',
            'title',
            'updated_at',
            'uuid',
            'uuid_host',
            'admin',
            'brands',
            'goal',
            'standard',
            'slug',
            { authors: ['lastname', 'firstname'] },
            { management_modes: ['uuid', 'title'] },
            { countries: ['uuid', 'title'] },
            { reactions: ['count', { users: ['uuid'] }] },
            { users: ['uuid', 'lastname', 'firstname', 'email'] }
          ],
          filters: {
            limit: 1,
            'slug:eq': this.$route.params.document || this.$route.params.slug
          }
        })

        return data[0]
      } catch (err) {
        throw new Error(err)
      }
    }
  }
}
</script>

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