<script>
import UserModal from '@inside-users/modals/UserModal'

export default {
  name: 'user-modal',
  extends: UserModal,
  $_i18nRootPath: 'customs.USER.MODAL',
  data() {
    return {
      selection: {
        firstname: 'firstname',
        lastname: 'lastname',
        avatar: 'image',
        function: 'function',
        email: 'email',
        phone: 'phone',
        mobile_phone: 'mobile_phone',
        locations: 'locations.data',
        services: 'services.data',
        is_mery_21: 'is_mery_21',
        managed_mall: 'managed_mall',
        birthday: 'birthday'
      }
    }
  },
  methods: {
    scaffold(fields) {
      return {
        avatar: fields.avatar,
        title: `${this.$_username(fields)} ${
          fields.is_mery_21
            ? '<span class="users__infos--mery21 df-center-xy"><i class="sid2-check"></i></span>'
            : ''
        }`.trim(),
        subtitle: fields.function,
        sections: [
          {
            fields: [
              {
                label: this.$_tr('services'),
                value: fields.services.map(service => service.title).join(', ')
              },
              {
                label: this.$_tr('email'),
                value: fields.email,
                options: { mail: true }
              },
              { label: this.$_tr('phone'), value: fields.phone },
              { label: this.$_tr('mobilePhone'), value: fields.mobile_phone },
              {
                label: this.$_tr('locations'),
                value: fields.locations
                  .map(location => location.title)
                  .join(', ')
              },
              { label: this.$_tr('managedMall'), value: fields.managed_mall },
              {
                label: this.$_tr('birthday'),
                value: fields.birthday
                  ? this.$_formatDate(fields.birthday, 'll')
                  : null
              }
            ]
          }
        ]
      }
    }
  }
}
</script>

<style lang="scss">
.user-modal {
  h3 {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>
