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

export default {
  name: 'user-modal',
  extends: UserModal,
  data() {
    return {
      selection: {
        avatar: 'image',
        firstname: 'firstname',
        lastname: 'lastname',
        function: 'function',
        email: 'email',
        activityDomain: 'activity_domain.data',
        phone: 'phone',
        mobilePhone: 'mobile_phone',
        locations: 'locations.data',
        service: 'service.data',
        miniBio: 'mini_bio',
        company: 'business.data[0]',
        experiences: 'experiences.data'
      }
    }
  },
  methods: {
    scaffold(fields) {
      return {
        avatar: fields.avatar,
        title: this.$_username(fields),
        sections: [
          {
            fields: this.getCheckedData(fields, ['company', 'image'])
              ? [
                  {
                    label: '',
                    class: 'user-modal__company-logo',
                    tag: 'img',
                    data: {
                      src: this.$_getContentImage(
                        this.getCheckedData(fields, ['company', 'image'])
                      )
                    }
                  }
                ]
              : []
          },
          {
            fields: [
              {
                label: this.$_tr('listing.DEFAULT.HEADER.function'),
                value: fields.function
              },
              {
                label: this.$_tr('listing.DEFAULT.HEADER.business'),
                value: (fields.company || {}).title
              },
              {
                label: this.$_tr('listing.DEFAULT.HEADER.activityDomain'),
                value: fields.activityDomain
                  .map(domain => domain.title)
                  .join(', ')
              },
              {
                label: this.$_tr('listing.DEFAULT.HEADER.services'),
                value: fields.service.map(service => service.title).join(', ')
              },
              {
                label: this.$_tr('listing.DEFAULT.HEADER.email'),
                tag: 'a',
                value: fields.email,
                data: { href: `mailto:${fields.email}` }
              },
              {
                label: this.$_tr('listing.DEFAULT.HEADER.phone'),
                value: fields.phone
              },
              {
                label: this.$_tr('listing.DEFAULT.HEADER.mobilePhone'),
                value: fields.mobilePhone
              },
              {
                label: this.$_tr('listing.DEFAULT.HEADER.locations'),
                value: fields.locations
                  .map(location => location.title)
                  .join(', ')
              },
              {
                label: this.$_tr('listing.DEFAULT.HEADER.miniBio'),
                value: fields.miniBio
              },
              ...this.insertIf(fields.experiences.length, {
                label: this.$_tc(
                  'users.MODAL.experience',
                  [fields.experiences.length || 0],
                  this.$_currentLang,
                  fields.experiences.length || 0
                ),
                class: 'experiences',
                children: fields.experiences.map(({ title, slug }) => ({
                  tag: 'router-link',
                  class: 'link',
                  value: title,
                  data: { to: slug[0] }
                }))
              })
            ]
          }
        ]
      }
    }
  }
}
</script>

<style lang="scss">
body .user-modal {
  .modal__header {
    height: 118px;
  }

  &.default-modal .modal__body__title {
    color: var(--color-secondary);
    font-weight: 600;
    line-height: 34px;
    font-size: var(--font-size-h2);
  }

  &__company-logo {
    display: flex;
    justify-content: center;
    margin: var(--spacing-m) 0;

    img {
      height: 100px;
    }
  }

  .modal__section__content {
    .item {
      &.experiences {
        .link {
          display: block;
          margin-bottom: var(--spacing-xs);
        }
      }
    }
  }
}
</style>
