<template>
  <full-ged
    :link-types="null"
    :document-types="documentTypes"
    :folder-types="folderTypes"
    :home-with-cards="false"
    :table-options="{ rows, headers }"
  />
</template>

<script>
import FullGed from '@inside-ged/components/lib/Full'
import { Icon } from 'inside-collection/atoms'
import Conversion from '@inside-library/helpers/Conversion'
import iconExtension from '@inside-ged/mixins/icon-extension'
import { partition } from '@inside-library/helpers/Arrays'

export default {
  name: 'ged-global',
  $_i18nRootPath: 'customs.GED',
  components: {
    FullGed,
    Icon
  },
  mixins: [iconExtension],
  props: {
    contentDocuments: String,
    contentFolders: String
  },
  computed: {
    $_folderTypes() {
      const { folderTypes } = this.getStore('getOnlyContentTypesGed')
      return folderTypes
    },
    headers() {
      return [
        {}, // icons
        {
          value: this.$_tr('headers.name'),
          key: 'title',
          sortable: true,
          default: true,
          sort: ({ items, order }) => {
            const [folders, documents] = partition(
              items,
              ({ content_type: type }) => this.$_folderTypes.includes(type)
            )

            return [
              ...this.sortMethod({ data: folders, order, key: 'title' }),
              ...this.sortMethod({ data: documents, order, key: 'title' })
            ]
          }
        },
        {
          value: this.$_tr('headers.author'),
          key: 'author'
        },
        {
          value: this.$_tr('headers.size'),
          key: 'size',
          sortable: true
        },
        {
          value: this.$_tr('headers.date'),
          key: 'updated_at',
          sortable: true,
          order: 'desc',
          sort: ({ items, order }) => {
            const [folders, documents] = partition(
              items,
              ({ content_type: type }) => this.$_folderTypes.includes(type)
            )

            return [
              ...this.sortMethod({ data: folders, order, key: 'updated_at' }),
              ...this.sortMethod({
                data: documents,
                order,
                key: 'updated_at'
              })
            ]
          }
        },
        {} // main-action
      ]
    },
    documentTypes() {
      return {
        contents: [this.contentDocuments],
        fields: [
          'uuid',
          'content_type',
          'updated_at',
          'title',
          'admin',
          'has_section',
          'body',
          'file',
          'content',
          'introduction',
          { sites: ['uuid'] },
          { clients: ['uuid'] },
          { authors: ['uuid', 'firstname', 'lastname'] },
          { reactions: ['count', { users: ['uuid'] }] }
        ],
        filters: {
          'status:eq': 1
        },
        params: {
          ...(this.isAlive(this.site, 'uuid') && {
            currentSite: this.site.uuid
          }),
          ...(this.isAlive(this.client, 'uuid') && {
            currentClient: this.client.uuid
          })
        }
      }
    },
    folderTypes() {
      return {
        contents: [this.contentFolders],
        filters: {
          'status:eq': 1,
          sort: 'title:asc'
        },
        fields: [
          'uuid',
          'content_type',
          'updated_at',
          'title',
          'media_folder_intro',
          'admin',
          'image',
          'is_media_folder',
          'pid',
          'parent_tree',
          'color',
          { authors: ['uuid', 'firstname', 'lastname'] },
          { reactions: ['count', { users: ['uuid'] }] }
        ]
      }
    },
    $_icon() {
      return fields =>
        this.icon(
          fields.content_type,
          this.getCheckedData(fields, 'file.path'),
          this.$_type(fields) === 'folders'
            ? this.$_folderColor(
                fields.color,
                fields.content_type,
                fields.parent_tree
              )
            : null
        )
    },
    $_type() {
      return fields => this.getStore('getItemType', fields.content_type)
    },
    site() {
      return this.getStore('getUserInformation', 'site')
    },
    client() {
      return this.getStore('getUserInformation', 'client')
    }
  },
  methods: {
    $_folderColor(color, contentType, parentTree) {
      if (color || !this.isAlive(parentTree, [contentType])) {
        return color
      }

      const fn = folder => {
        if (folder.color) {
          return folder.color
        } else {
          return this.getCheckedData(folder, [contentType, 'data', 0])
            ? fn(folder[contentType].data[0])
            : null
        }
      }

      return fn(parentTree[contentType][0])
    },
    rows(fields) {
      return [
        {
          id: 'icon',
          class: 'icon-file',
          tag: Icon,
          data: { ...this.$_icon(fields) },
          cellOptions: { width: '24px' }
        },
        {
          id: 'title',
          class: 'title',
          tag: 'p',
          value: fields.title
        },
        {
          id: 'author',
          class: 'author',
          value: this.$_username(fields.authors)
        },
        {
          id: 'size',
          class: 'size',
          tag: 'p',
          value: this.isAlive(fields, 'file.size')
            ? Conversion.octetsToUnits(fields.file.size)
            : '-',
          cellOptions: { width: '100px' }
        },
        {
          id: 'date',
          class: 'date',
          tag: 'date-ui',
          data: { date: fields.updated_at },
          cellOptions: {
            width: '100px'
          }
        },
        {
          id: 'main-action',
          class: 'main-action',
          tag: this.$_type(fields) === 'documents' ? Icon : 'div',
          data: {
            ...(this.$_type(fields) === 'documents' && {
              icon: `${fields.content ? 'eye-on' : 'download'}`
            })
          },
          cellOptions: { width: '24px' }
        }
      ]
    },
    sortMethod({ data, order, key }) {
      return data.sort((a, b) => {
        let itemA = this.getCheckedData(a, key)
        let itemB = this.getCheckedData(b, key)

        const isString = typeof itemA === 'string' || typeof itemB === 'string'

        if (order === 'asc') {
          return isString ? itemA.localeCompare(itemB) : itemA > itemB ? 1 : -1
        }

        return isString ? itemB.localeCompare(itemA) : itemA > itemB ? -1 : 1
      })
    }
  }
}
</script>
