<script>
import { markRaw } from 'vue'

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

import teamsImg from '../../inside-customs/assets/img/teams.jpg'

export default {
  name: 'user-modal',
  $_i18nRootPath: 'users.MODAL',
  components: { Link, CardUser },
  extends: UserModal,
  data() {
    return {
      teamsImg,
      teamsChatLink: 'https://teams.microsoft.com/l/chat/0/0?users=',
      selection: {
        avatar: 'image',
        firstname: 'firstname',
        lastname: 'lastname',
        function: 'function',
        linkedIn: 'linkedin',
        twitter: 'twitter',
        teams: 'teams',
        email: 'email',
        phone: 'phone',
        mobile: 'mobile_phone',
        subsidiaries: 'subsidiaries',
        locations: 'locations',
        languages: 'languages',
        skills: 'skills',
        manager: 'users',
        address: 'address',
        city: 'cities',
        officeLocation: 'office_location'
      }
    }
  },
  methods: {
    scaffold(fields) {
      const { manager } = fields

      return {
        avatar: fields.avatar,
        title: this.$_username(fields),
        subtitle: fields.function,
        socials: [
          ...this.insertIf(!!fields.linkedIn, {
            url: fields.linkedIn,
            icon: 'linkedin'
          }),
          ...this.insertIf(!!fields.twitter, {
            url: fields.twitter,
            icon: 'twitter'
          })
        ],
        sections: [
          {
            fields: [
              {
                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.mobile, {
                label: this.$_tr('mobile'),
                tag: markRaw(Link),
                value: fields.mobile,
                data: {
                  href: `tel:${fields.mobile}`,
                  icon: null,
                  external: true
                }
              }),
              ...this.insertIf(!!fields.subsidiaries, {
                label: this.$_tr('subsidiaries'),
                value: fields.subsidiaries?.data
                  ?.map(({ title }) => title)
                  .join(', ')
              }),
              ...this.insertIf(!!fields.locations, {
                label: this.$_tr('locations'),
                value: fields.locations?.data
                  ?.map(({ title }) => title)
                  .join(', ')
              }),
              ...this.insertIf(!!fields.languages, {
                label: this.$_tr('languages'),
                value: fields.languages
              }),
              ...this.insertIf(!!fields.address, {
                label: this.$_tr('address'),
                value: fields.address
              }),
              ...this.insertIf(!!fields.city, {
                label: this.$_tr('city'),
                value: fields?.city?.title
              }),
              ...this.insertIf(!!fields.officeLocation, {
                label: this.$_tr('officeLocation'),
                value: fields.officeLocation
              }),
              ...this.insertIf(!!fields.teams, {
                tag: markRaw(Link),
                class: 'teams',
                data: {
                  target: '_blank',
                  href: `${this.teamsChatLink}${fields.teams}`,
                  icon: null,
                  external: true
                },
                children: [
                  {
                    tag: 'image-ui',
                    class: 'mr-xs',
                    data: {
                      path: this.teamsImg,
                      static: true
                    }
                  },
                  {
                    tag: markRaw(Link),
                    value: this.$_tr('teams'),
                    data: {
                      target: '_blank',
                      href: `${this.teamsChatLink}${fields.teams}`,
                      icon: null,
                      external: true
                    }
                  }
                ]
              }),
              ...this.insertIf(!!fields.skills, {
                label: this.$_tr('skills'),
                value: fields.skills
              }),
              ...this.insertIf(this.isAlive(manager, 'firstname'), {
                label: this.$_tr('manager'),
                tag: markRaw(CardUser),
                class: 'manager',
                data: {
                  ...manager,
                  image: this.isAlive(manager, 'image', 'avatar')
                    ? this.$_getContentImage(manager.image, 'avatar')
                    : null,
                  function: this.getCheckedData(manager, 'function')
                }
              })
            ]
          }
        ]
      }
    }
  }
}
</script>

<style lang="scss">
.user-modal {
  .teams {
    display: flex;

    img {
      max-width: 24px;
    }
  }

  .manager {
    .user-card-container {
      margin-top: var(--spacing-s);
    }
  }
}
</style>
