<script>
import { markRaw } from 'vue'

import UserModal from '@inside-users/modals/UserModal.vue'
import UserCard from '../../inside-customs/components/UserCard'

export default {
  name: 'user-modal',
  extends: UserModal,
  $_i18nRootPath: 'users.MODAL',
  data() {
    return {
      selection: {
        uuid: 'uuid',
        image: 'image',
        firstname: 'firstname',
        lastname: 'lastname',
        function: 'function',
        linkedin: 'linkedin',
        twitter: 'twitter',
        email: 'email',
        phone: 'phone',
        mobile: 'mobile',
        entity: 'entities.title',
        manager: 'manager'
      }
    }
  },
  methods: {
    scaffold(fields) {
      return {
        avatar: fields.image,
        title: this.$_username(fields),
        subtitle: fields.function,
        socials: [
          {
            url: fields.linkedin,
            icon: 'linkedin'
          },
          {
            url: fields.twitter,
            icon: 'twitter'
          }
        ],
        sections: [
          {
            fields: [
              {
                label: this.$_tr('email'),
                tag: 'a',
                value: fields.email,
                data: { href: `mailto:${fields.email}` }
              },
              {
                label: this.$_tr('phone'),
                value: fields.phone
              },
              {
                label: this.$_tr('mobile'),
                value: fields.mobile
              },
              {
                label: this.$_tr('entity'),
                value: fields.entity
              },
              ...this.insertIf(this.isAlive(fields, ['manager', 'uuid']), {
                label: this.$_tr('manager'),
                tag: markRaw(UserCard),
                data: { ...fields.manager }
              })
            ]
          }
        ]
      }
    }
  }
}
</script>

<style lang="scss">
div.user-modal {
  .modal__header {
    height: 184px;
  }
}
</style>
