<script>
import { markRaw } from 'vue'

import { Link } from 'inside-collection/components'
import UserModal from '@inside-users/modals/UserModal'

export default {
  name: 'user-modal',
  components: { Link },
  extends: UserModal,
  $_i18nRootPath: 'users.MODAL',
  data() {
    return {
      selection: {
        avatar: 'image',
        firstname: 'firstname',
        lastname: 'lastname',
        email: 'email',
        function: 'function',
        phone: 'phone',
        mobilePhone: 'mobile_phone',
        sector: 'sector',
        sites: 'sites.data',
        attendanceDays: 'attendance_days',
        verbalLanguages: 'verbal_languages',
        joiningDate: 'joining_date',
        address: 'address',
        linkedin: 'linkedin'
      }
    }
  },
  methods: {
    scaffold(fields) {
      return {
        avatar: fields.avatar,
        title: this.$_username(fields),
        subtitle: fields.function,
        socials: [
          ...this.insertIf(!!fields.linkedin, {
            url: fields.linkedin,
            icon: 'linkedin',
            color: '#0077b5'
          })
        ],
        sections: [
          {
            fields: [
              ...this.insertIf(!!fields.email, {
                label: this.$_tr('email'),
                tag: markRaw(Link),
                value: fields.email,
                data: {
                  href: `mailto:${fields.email}`,
                  icon: null,
                  external: true
                }
              }),
              ...this.insertIf(!!fields.phone, {
                label: this.$_tr('phone'),
                tag: markRaw(Link),
                value: fields.phone,
                data: {
                  href: `tel:${fields.phone}`,
                  icon: null,
                  external: true
                }
              }),
              ...this.insertIf(!!fields.mobilePhone, {
                label: this.$_tr('mobilePhone'),
                tag: markRaw(Link),
                value: fields.mobilePhone,
                data: {
                  href: `tel:${fields.mobilePhone}`,
                  icon: null,
                  external: true
                }
              }),
              ...this.insertIf(!!fields.sector, {
                label: this.$_tr('sector'),
                value: fields.sector
              }),
              ...this.insertIf(this.isAlive(fields, ['sites', 0]), {
                label: this.$_tr('teams'),
                children: (fields.sites || []).map(({ title }) => ({
                  value: title
                }))
              }),
              ...this.insertIf(!!fields.attendanceDays, {
                label: this.$_tr('attendanceDays'),
                value: fields.attendanceDays
              }),
              ...this.insertIf(!!fields.verbalLanguages, {
                label: this.$_tr('verbalLanguages'),
                value: fields.verbalLanguages
              }),
              ...this.insertIf(!!fields.joiningDate, {
                label: this.$_tr('joiningDate'),
                value: fields.joiningDate
              }),
              ...this.insertIf(!!fields.address, {
                label: this.$_tr('address'),
                value: fields.address
              })
            ]
          }
        ]
      }
    }
  }
}
</script>
