<template>
  <div
    class="banner-customs-container"
    :style="{
      ...(data.banner && {
        background: `url(${$_getContentImage(data.banner)})`,
        backgroundPosition: 'center',
        backgroundSize: 'cover'
      })
    }"
  >
    <Back
      v-if="backButton"
      :text-content="$_tr('button')"
      :path="path"
      :arrow-color="$_theme('colorLight')"
      :text-color="$_theme('colorLight')"
    />

    <Title class="title" :dark-mode="!!data.banner" v-bind="$attrs">
      {{ data.title }} <span v-if="hasClient"> {{ client }} </span>
    </Title>

    <p v-if="data.introduction" class="introduction">
      {{ data.introduction }}
    </p>

    <p v-if="addContent" class="add-content">
      <AddContent
        :content="content"
        :parents="parentsDashboard"
        :contents="contentsDashboard"
        :multi-upload-contents="['shared_documents', 'space_documents']"
        type="neutral"
      />
    </p>
  </div>
</template>

<script>
import { http } from '@inside-library/helpers/Http'
import { isEmpty } from '@inside-library/helpers/Objects'
import { Title, IconText } from 'inside-collection/atoms'
import { IconTextButton } from 'inside-collection/components'

import Back from './Back'
import AddContent from './AddContent'

export default {
  name: 'banner',
  $_i18nRootPath: 'customs.DASHBOARD',
  components: {
    Title,
    IconText,
    IconTextButton,
    Back,
    AddContent
  },
  props: {
    staticData: {
      type: Object,
      default: () => ({})
    },
    addContent: {
      type: Boolean
    },
    backButton: {
      type: Boolean
    },
    hasClient: {
      type: Boolean
    },
    page: {
      type: String
    },
    add: {
      type: Array,
      default: () => []
    },
    content: {
      type: String
    },
    contents: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      isStatic: !isEmpty(this.staticData),
      data: this.staticData,
      isOpened: false,
      contentsDashboard: [
        'shared_documents',
        'space_documents',
        ...this.contents
      ],
      parentsDashboard: ['shared_folders', 'space_folders']
    }
  },
  computed: {
    path() {
      return this.$_currentLang === 'en' ? '/dashboard' : '/tableau-de-bord'
    },
    client() {
      return this.getCheckedData(
        this.getStore('getUserInformation', 'client'),
        'title'
      )
    }
  },
  beforeMount() {
    if (!this.isStatic) {
      this.fetchData()
    } else {
      this.addMainBlock(this.data)
    }
  },
  methods: {
    async fetchData() {
      try {
        const { data = [] } = await http.get('content/custom', {
          fields: [
            'uuid',
            'banner',
            'title',
            'introduction',
            'content_type',
            'admin'
          ],
          filters: {
            [this.page ? 'custom_slug:eq' : 'slug:eq']:
              this.page || this.$route.path.replace(/\//, '')
          }
        })

        this.addMainBlock(data[0])

        this.data = this.getCheckedData(data, 0)
      } catch (err) {
        throw new Error(err)
      }
    },
    addMainBlock(data = {}) {
      const { uuid, admin, content_type: contentType } = data

      this.$store.commit('setContentMainsActions', {
        add: this.add,
        edit: {
          uuid,
          contentType,
          admin
        }
      })
    },
    handleMultipleAdd() {
      this.triggerModal(
        'add-form',
        'static',
        {
          item: {
            parents: this.parents,
            contents: this.contents
          }
        },
        { layout: 'right', width: '1000px', transition: 'fadeInLeft' }
      )

      this.isOpened = false
    }
  }
}
</script>

<style lang="scss">
.banner-customs-container {
  width: 100%;
  margin-bottom: var(--spacing-xxl);
  padding: var(--spacing-l);
  text-align: center;

  .title {
    @include H1;
  }

  .introduction {
    color: var(--color-light);
  }

  .add-content-container {
    margin: var(--spacing-s) 0;
  }
}
</style>
