<script>
import { markRaw } from 'vue'

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

import DefaultModal from '@inside-library/components/modals/default/DefaultModal'
import { Button, Link } from 'inside-collection/components'
import JobHeader from './sub-components/JobHeader'

export default {
  name: 'job-modal',
  $_i18nRootPath: 'customs.JOBS.MODAL',
  components: {
    JobHeader,
    Button,
    Link
  },
  extends: DefaultModal,
  data() {
    return {
      selection: {
        title: 'title',
        service: 'service_text',
        company: 'business.data[0].title',
        activityDomain: 'activity_domain.data[0].title',
        region: 'region.data[0].title',
        city: 'city',
        missions: 'content',
        profile: 'profile',
        firstname: 'authors.firstname',
        lastname: 'authors.lastname',
        published_at: 'published_at',
        email: 'email',
        link: 'link',
        contractType: 'contract_types.data[0].title'
      }
    }
  },
  async beforeMount() {
    await http.post(
      `statistics/modal/viewed/${this.heritedData.content_type}/${this.heritedData.uuid}`
    )
  },
  methods: {
    scaffold(fields) {
      return {
        title: fields.title,
        subtitle: fields.service,
        sections: [
          {
            fields: [
              {
                tag: markRaw(JobHeader),
                data: {
                  company: fields.company,
                  activityDomain: fields.activityDomain,
                  region: fields.region,
                  city: fields.city
                }
              },
              ...this.insertIf(fields.link),
              {
                label: this.$_tr('link'),
                tag: markRaw(Link),
                data: {
                  href: fields.link,
                  inline: false
                },
                children: [
                  {
                    tag: markRaw(Button),
                    value: this.$_tr('seeOffer')
                  }
                ]
              },
              {
                label: this.$_tr('contractType'),
                value: fields.contractType
              },
              ...this.insertIf(!!fields.missions, {
                label: this.$_tr('missions'),
                class: 'default-text',
                tag: 'paragraph-listing',
                data: {
                  heritedData: fields.missions,
                  heritedOptions: { template: true }
                }
              }),
              ...this.insertIf(!!fields.profile, {
                label: this.$_tr('profile'),
                class: 'default-text',
                value: fields.profile,
                html: true
              }),
              {
                value: this.$_tc('toApply', [fields.email]),
                class: 'job-modal__apply mt-xxl',
                html: true
              },
              {
                value: this.$_tc('author', [
                  this.$_formatDate(fields.published_at),
                  `mailto:${fields.email}`,
                  this.$_username(fields)
                ]),
                class: 'job-modal__reported',
                html: true
              }
            ]
          }
        ]
      }
    }
  }
}
</script>
