<template>
  <div class="dashboard-listing-container">
    <DashboardBanner :title="fetchedData.title" />

    <TemplateContainer size="xl">
      <filters-container :id="filterId" :filters="filters" />

      <div v-if="$_isSuperAdmin && routeEnabled" class="dashboard-actions">
        <IconTextButton icon="upload" @click.native="onImport">
          {{ $_tr('import') }}
        </IconTextButton>
      </div>

      <table-listing
        :id="listingId"
        :endpoint="`content/${searchContents.join(',')}`"
        :fields="fields"
        :filters="requestFilters"
        :filter-id="filterId"
        :items-per-page="15"
        :headers="headers"
        :rows="rows"
        :actions="actions"
        :mass-actions="massActions"
        :search-endpoint="`content/${searchContents.join(',')}`"
        :request-config="{ abortPrevious: true }"
        :selectable="true"
        :row-deep-data-key="['rops', 'declined_documents']"
        empty-cell-value="-"
        loader-size="xxl"
      />
    </TemplateContainer>
  </div>
</template>

<script>
import { markRaw } from 'vue'

import { IconTextButton } from 'inside-collection/components'

import TemplateContainer from '@inside-commons/components/lib/TemplateContainer'

import TitleCol from './TitleCol'
import DashboardBanner from '../common/DashboardBanner'
import StatusUi from '../common/StatusUi'
import FormattedReferences from '../../FormattedReferences'
import filters from './filters.js'
import request from './request.js'
import common from '../common'

export default {
  name: 'DashboardListingContainer',
  $_i18nRootPath: 'customs.DASHBOARD.LISTING',
  components: {
    IconTextButton,
    DashboardBanner,
    StatusUi,
    TemplateContainer
  },
  mixins: [filters, request, common],
  props: {
    fetchedData: {
      type: Object
    }
  },
  computed: {
    rows() {
      return fields => [
        {
          tag: markRaw(TitleCol),
          data: {
            listingId: this.listingId,
            title: fields.title,
            uuid: fields.uuid,
            isChild: fields.isChild,
            ...(fields.rops && {
              rops: fields.rops.data
            }),
            ...(fields.declined_documents && {
              declinedDocuments: fields.declined_documents.data
            })
          }
        },
        {
          tag: markRaw(FormattedReferences),
          data: {
            listData: fields.brands.data,
            limit: 2,
            total: fields.brands.total
          }
        },
        {
          tag: markRaw(FormattedReferences),
          data: {
            listData: fields.countries.data,
            limit: 2,
            total: fields.countries.total
          }
        },
        {
          id: 'workflowStatus',
          tag: markRaw(StatusUi),
          class: (() => {
            if (
              (fields.workflow && fields.workflow.status) ||
              fields?.workflow?.status === 0
            ) {
              return `status--${fields.workflow.status}`
            }
          })(),
          data: {
            status: (() => {
              if (
                (fields.workflow && fields.workflow.status) ||
                fields?.workflow?.status === 0
              ) {
                return this.$_statusName(fields.workflow.status)
              }

              return '-'
            })()
          }
        },
        {
          id: 'publicationStatus',
          tag: markRaw(StatusUi),
          class: (() => {
            return `status--${fields.status ? '1' : '3'}`
          })(),
          data: {
            status: (() => {
              return fields.status
                ? this.$_tr('item.published')
                : this.$_tr('item.unpublished')
            })()
          }
        },
        {
          value: this.$_tr(`contentTypes.${fields.content_type}`)
        },
        {
          value: this.$_formatDate(fields.published_at)
        }
      ]
    },
    routeEnabled() {
      return this.$route.name.includes('DashboardListingSops')
    }
  },
  methods: {
    onImport() {
      this.triggerModal(
        'dashboard-import',
        'static',
        { item: { listingId: this.listingId } },
        {
          layout: 'center',
          size: 'm',
          transition: 'fadeIn'
        }
      )
    }
  }
}
</script>

<style lang="scss" scoped>
@use '../common/dashboard.scss' as *;
</style>
