<template>
  <div class="users-modal-contacts-container">
    <section-default-modal
      v-for="(section, index) in sections"
      :key="index"
      v-responsive="{ small: el => el.width < 240 }"
      :section-data="section"
    />
  </div>
</template>

<script>
import { markRaw } from 'vue'

import { insertIf, unique } from '@inside-library/helpers/Arrays'

import SectionDefaultModal from '@inside-library/components/modals/default/SectionDefaultModal'
import UsersModalCardListing from './UsersModalCardListing'
import { Link } from 'inside-collection/components'

export default {
  name: 'UsersModalContacts',
  $_i18nRootPath: 'customs.USERS.MODAL.CONTACTS',
  components: {
    SectionDefaultModal,
    UsersModalCardListing,
    Link
  },
  computed: {
    data() {
      return this.heritedData
    },
    sections() {
      const assistants = [...this.data.assistants]

      return [
        {
          class: 'left',
          fields: [
            {
              label: this.$_tr('labels.email'),
              tag: 'a',
              data: { href: `mailto:${this.data.email}` },
              value: this.data.email
            },
            ...insertIf(!!this.data.directLine, {
              label: this.$_tr('labels.directLine'),
              tag: 'a',
              data: { href: `tel:${this.data.directLine}` },
              value: this.data.directLine
            }),
            ...insertIf(!!this.data.gsm, {
              label: this.$_tr('labels.gsm'),
              tag: 'a',
              data: { href: `tel:${this.data.gsm}` },
              value: this.data.gsm
            }),
            ...insertIf(this.isAlive(this.data, ['mainAssistant', 0]), {
              label: this.$_tr('labels.mainManager'),
              tag: markRaw(UsersModalCardListing),
              data: {
                users: this.data.mainAssistant
              }
            }),
            ...insertIf(this.isAlive(this.data, ['mainAssistantTo', 0]), {
              label: this.$_tr('labels.mainAssistantTo'),
              tag: markRaw(UsersModalCardListing),
              data: {
                users: this.data.mainAssistantTo
              }
            }),
            ...insertIf(this.isAlive(assistants, 0), {
              tag: markRaw(UsersModalCardListing),
              label: this.$_tr('labels.assistant'),
              data: {
                users: unique(assistants, 'uuid')
              }
            }),
            ...insertIf(this.isAlive(this.data, ['personnalAssistantTo', 0]), {
              label: this.$_tr('labels.managers'),
              tag: markRaw(UsersModalCardListing),
              data: {
                users: this.data.personnalAssistantTo
              }
            })
          ]
        },
        {
          class: 'right',
          fields: [
            { label: this.$_tr('labels.location'), value: this.data.location },
            ...insertIf(this.data.office && this.data.office !== -10, {
              label: this.$_tr('labels.office'),
              value: this.data.office
            }),
            ...insertIf(!!this.data.floorMap, {
              class: 'floor-map',
              tag: markRaw(Link),
              value: this.$_tr('labels.floorMap'),
              data: {
                icon: 'arrow-link',
                href: this.$_getContentImage(this.data.floorMap),
                target: '_blank',
                direction: 'row reverse',
                hoverDecorationDisabled: true,
                color: this.$_theme('colorPrimary')
              }
            })
          ]
        }
      ]
    }
  }
}
</script>
