<template>
  <div class="users-modal-infos-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 } from '@inside-library/helpers/Arrays'

import SectionDefaultModal from '@inside-library/components/modals/default/SectionDefaultModal'
import SubLinkListing from '@inside-library/components/listing/sub-components/SubLinkListing'

export default {
  name: 'UsersModalInfos',
  $_i18nRootPath: 'customs.USERS.MODAL.INFOS',
  components: {
    SectionDefaultModal,
    SubLinkListing
  },
  data() {
    return {
      canEdit: false,
      requestDone: false,
      total: null
    }
  },
  computed: {
    data() {
      return this.heritedData
    },
    sections() {
      return [
        {
          class: 'left',
          fields: [
            {
              label: this.$_tr('labels.alias'),
              value: this.data.username
            },
            {
              label: this.$_tr('labels.status'),
              value: this.data.status
            },
            ...insertIf(this.isAlive(this.data, ['spaces', 0]), {
              label: this.$_tc(
                'labels.spaces',
                [this.data.spaces.length || 0],
                this.$_currentLang,
                this.data.spaces.length || 0
              ),
              tag: markRaw(SubLinkListing),
              data: {
                heritedData: this.data.spaces
              }
            }),
            ...insertIf(this.isAlive(this.data, ['expertises', 0]), {
              label: this.$_tc(
                'labels.expertises',
                [this.data.expertises.length || 0],
                this.$_currentLang,
                this.data.expertises.length || 0
              ),
              class: 'expertises',
              tag: markRaw(SubLinkListing),
              data: {
                heritedData: this.data.expertises
              }
            })
          ]
        },
        {
          class: 'right',
          fields: [
            ...insertIf(this.isAlive(this.data, ['languages', 0]), {
              label: this.$_tc(
                'labels.languages',
                [this.data.languages.length || 0],
                this.$_currentLang,
                this.data.languages.length || 0
              ),
              value: this.data.languages.map(({ title }) => title).join(', ')
            }),
            ...insertIf(!!this.data.startDate, {
              label: this.$_tr('labels.startDate'),
              value: this.$_formatDate(this.data.startDate)
            }),
            ...insertIf(!!this.data.birthday, {
              label: this.$_tr('labels.birthday'),
              value: this.$_formatDate(this.data.birthday)
            })
          ]
        }
      ]
    }
  }
}
</script>

<style lang="scss">
.users-modal-infos-container li {
  list-style-type: none !important;
}

.users-modal-tabs-container .main-content .users-modal-infos-container {
  flex-direction: row !important;
}

.users-modal-tabs-container
  .main-content
  .users-modal-infos-container
  > .modal__section {
  width: 48% !important;
}
</style>
