<script>
import { markRaw } from 'vue'

import { Link, Button } from 'inside-collection/components'
import DefaultModal from '~insideLibrary/components/modals/default/DefaultModal'
import ParagraphListing from '@inside-library/components/listing/ParagraphListing'
import BusinessKeyFigures from './sub-components/BusinessKeyFigures'
import BusinessLeaders from './sub-components/BusinessLeaders'

export default {
  name: 'business-modal',
  $_i18nRootPath: 'customs.BUSINESS.MODAL',
  components: { BusinessKeyFigures, Link, Button },
  extends: DefaultModal,
  data() {
    return {
      selection: {
        title: 'title',
        content: 'content',
        image: 'image',
        leaders: 'leaders.data',
        link: 'site_link',
        housing: 'housing',
        housedPeople: 'housed_people',
        coworker: 'coworker'
      }
    }
  },
  methods: {
    scaffold(fields) {
      const hasKeyFigures =
        !!fields.housing || !!fields.housedPeople || !!fields.coworker

      return {
        title: fields.title,
        ...(fields.image && {
          subtitle: `<img src="${this.$_getContentImage(
            fields.image,
            'image-card'
          )}" alt="Logo de ${fields.title}" class="my-m"/>`
        }),
        sections: [
          {
            fields: [
              ...this.insertIf(!!fields.content, {
                class: 'content',
                tag: markRaw(ParagraphListing),
                data: {
                  heritedData: fields.content,
                  heritedOptions: { template: true }
                }
              }),
              ...this.insertIf(hasKeyFigures, {
                label: this.$_tr('keyFigures'),
                tag: markRaw(BusinessKeyFigures),
                data: {
                  housing: fields.housing,
                  housedPeople: fields.housedPeople,
                  coworker: fields.coworker
                }
              }),
              ...this.insertIf(this.isAlive(fields, ['leaders', 0]), {
                label: this.$_tc(
                  'leaders',
                  [fields.leaders.length || 0],
                  this.$_currentLang,
                  fields.leaders.length || 0
                ),
                tag: markRaw(BusinessLeaders),
                data: { leaders: fields.leaders }
              }),
              ...this.insertIf(!!fields.link, {
                tag: markRaw(Link),
                data: {
                  href: fields.link,
                  inline: false
                },
                children: [
                  {
                    tag: markRaw(Button),
                    value: this.$_tr('visit')
                  }
                ]
              })
            ]
          }
        ]
      }
    }
  }
}
</script>
