<template>
  <Banner
    :static-data="{
      title: getTitle(),
      introduction: title && $_tc('introduction', [title])
    }"
    :background-color="$_theme('colorDashboard')"
    :back="{
      href: {
        name: 'DashboardSummary'
      },
      title: $_tr('back')
    }"
  >
    <template v-if="title" #footer>
      <IconTextButton
        icon="more"
        appearance="secondary"
        @click.native="onAddContent"
      >
        {{ $_tr('addContent') }}
      </IconTextButton>
    </template>
  </Banner>
</template>

<script>
import { IconTextButton } from 'inside-collection/components'
import Banner from '@inside-commons/components/lib/Banner'

export default {
  name: 'DashboardBanner',
  $_i18nRootPath: 'customs.DASHBOARD.LISTING.BANNER',
  components: {
    Banner,
    IconTextButton
  },
  props: {
    title: {
      type: String
    }
  },
  methods: {
    onAddContent() {
      this.triggerModal(
        'add-contents-admin',
        'static',
        {
          item: {
            contents: [
              { title: 'Documents', value: 'documents' },
              { title: 'ROPs', value: 'rops' },
              { title: 'SOPs', value: 'sops' }
            ]
          }
        },
        { layout: 'center', width: 800, transition: 'fadeIn' }
      )
    },
    getTitle() {
      if (this.title) {
        return this.$_tc('title', [this.title])
      } else {
        return this.$route.name.includes('DashboardListingToValidate')
          ? this.$_tr('titleToValidate')
          : this.$_tr('titleCorporate')
      }
    }
  }
}
</script>
