<script>
import { markRaw } from 'vue'

import { Link } from 'inside-collection/components'

import UserModal from '@inside-users/modals/UserModal'
import Card from '@inside-users/components/lib/Card'

export default {
  name: 'user-modal',
  $_i18nRootPath: 'customs.USER.MODAL',
  components: { Link, Card },
  extends: UserModal,
  data() {
    return {
      selection: {
        firstname: 'firstname',
        lastname: 'lastname',
        function: 'function',
        avatar: 'image',
        phone: 'phone',
        mobilePhone: 'mobile_phone',
        email: 'email',
        entities: 'entities.data',
        services: 'services.data',
        locations: 'locations.data',
        countries: 'countries.data',
        hobbies: 'hobbies',
        coworkers: 'coworkers',
        users: 'users.data'
      }
    }
  },
  methods: {
    cardUsersList(usersList) {
      return (
        usersList &&
        usersList.map(user => {
          return {
            tag: markRaw(Card),
            data: {
              ...user,
              image: this.$_getContentImage(user.image, 'avatar')
            },
            class: 'my-s'
          }
        })
      )
    },
    scaffold(fields) {
      console.log(fields.avatar)

      return {
        avatar: fields.avatar,
        title: this.$_username(fields),
        subtitle: fields.function,
        sections: [
          {
            class: 'infos-wrapper',
            fields: [
              { label: this.$_tr('phone'), value: fields.phone },
              ...this.insertIf(this.isAlive(fields, ['entities', 0]), {
                label: this.$_tr('entities'),
                value: fields.entities
                  .map(item => `<div>${item.title}</div>`)
                  .join(''),
                html: true
              }),
              {
                label: this.$_tr('mobilePhone'),
                value: fields.mobilePhone
              },
              ...this.insertIf(this.isAlive(fields, ['services', 0]), {
                label: this.$_tr('services'),
                value: fields.services
                  .map(item => `<div>${item.title}</div>`)
                  .join(''),
                html: true
              }),
              {
                label: this.$_tr('email'),
                tag: markRaw(Link),
                data: { href: `mailto:${fields.email}`, icon: null },
                value: fields.email
              },
              ...this.insertIf(this.isAlive(fields, ['locations', 0]), {
                label: this.$_tr('locations'),
                value: fields.locations
                  .map(item => `<div>${item.title}</div>`)
                  .join(''),
                html: true
              }),
              ...this.insertIf(this.isAlive(fields, ['countries', 0]), {
                label: this.$_tr('countries'),
                value: fields.countries
                  .map(item => `<div>${item.title}</div>`)
                  .join(''),
                html: true
              }),
              { label: this.$_tr('hobbies'), value: fields.hobbies }
            ]
          },
          {
            fields: [
              ...this.insertIf(!!fields?.users.length, {
                label: this.$_tr('manager'),
                children: (fields?.users || []).map(user => ({
                  children: [
                    {
                      tag: markRaw(Card),
                      data: {
                        ...user,
                        image: this.$_getContentImage(user?.image, 'avatar')
                      },
                      class: 'my-s'
                    }
                  ]
                }))
              }),
              ...this.insertIf(
                this.isAlive(fields, ['coworkers', 'data', 0, 'uuid']),
                {
                  label: this.$_tc('coworkers', fields.coworkers.data.length),
                  children: this.cardUsersList(
                    this.getCheckedData(fields, ['coworkers', 'data'], null)
                  )
                }
              )
            ]
          }
        ]
      }
    }
  }
}
</script>

<style lang="scss">
@use '@inside-library/styles/mixins/partials/common-mixin' as *;

.default-modal {
  .infos-wrapper,
  .user-cards-wrapper {
    .modal__section__content {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--spacing-m);

      @include mobile {
        grid-template-columns: 1fr;
      }
    }
  }
}
</style>
