<script>
import DefaultModal from '~insideLibrary/components/modals/default/DefaultModal'

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

export default {
  name: 'experience-modal',
  extends: DefaultModal,
  $_i18nRootPath: 'customs.EXPERIENCES.MODAL',
  data() {
    return {
      experiencesCount: 0,
      selection: {
        content: 'content'
      }
    }
  },
  watch: {
    experiencesCount(count) {
      this.scaffoldedData = this.scaffold({ ...this.$_data, count })
    }
  },
  async created() {
    try {
      const { data } = await http.get('content/experiences', {
        params: {
          fields: ['count'],
          filters: { 'status:eq': 1 }
        }
      })

      this.experiencesCount = data.length
    } catch (err) {
      throw new Error(err)
    }
  },
  methods: {
    scaffold(fields) {
      return {
        title: this.$_tr('title'),
        subtitle: `${this.$_tr('subtitle')} : ${fields.count || 0}`,
        sections: [
          {
            fields: [
              ...this.insertIf(fields.content.length, {
                tag: 'paragraph-listing',
                class: 'default-text',
                data: {
                  heritedData: fields.content,
                  heritedOptions: { template: true }
                }
              })
            ]
          }
        ]
      }
    }
  }
}
</script>
