<script>
import UserModal from '@inside-users/modals/UserModal.vue'
import { IconText } from 'inside-collection/atoms'

export default {
  name: 'user-modal',
  components: { IconText },
  extends: UserModal,
  $_i18nRootPath: 'customs.USER.modal',
  data() {
    return {
      selection: {
        uuid: 'uuid',
        firstname: 'firstname',
        lastname: 'lastname',
        image: 'image',
        function: 'function',
        phone: 'phone',
        email: 'email',
        site: 'sites'
      }
    }
  },
  methods: {
    scaffold(fields) {
      return {
        avatar: fields.image,
        title: this.$_username(fields),
        subtitle: fields.function,
        sections: [
          {
            fields: [
              ...this.insertIf(!!fields.email, {
                label: this.$_tr('email'),
                tag: 'a',
                value: fields.email,
                data: { href: `mailto:${fields.email}` }
              }),
              ...this.insertIf(!!fields.phone, {
                label: this.$_tr('phone'),
                children: (fields.phone || '').split(',').map(value => ({
                  tag: 'a',
                  data: { href: `tel:${value}` },
                  value
                }))
              }),
              ...this.insertIf(!!fields.site, {
                label: this.$_tr('site'),
                tag: IconText,
                data: { icon: 'pin' },
                value: this.getCheckedData(fields, [
                  'site',
                  'data',
                  [0],
                  'title'
                ])
              })
            ]
          }
        ]
      }
    }
  }
}
</script>
