<template>
  <div class="registration-validation-admin-container">
    <div class="registrations-page__header">
      <h2>{{ $_tr('title') }}</h2>
    </div>

    <scaffolded-data :data="scaffoldedUser" />

    <div class="validation-actions-container">
      <!-- "accepted" // ou "declined" -->
      <div class="btn btn-refuse" @click="submitRegistration('declined')">
        {{ $_tr('common.actions.refuse') }}
      </div>
      <div class="btn" @click="submitRegistration('accepted')">
        {{ $_tr('common.actions.validate') }}
      </div>
    </div>
  </div>
</template>

<script>
import ScaffoldMixin from '@inside-library/components/commons/mixins/scaffold-mixin'

import { http } from '@inside-library/helpers/Http'

export default {
  name: 'registration-validation-admin',
  $_i18nRootPath: 'customs.ADMINISTRATION.REGISTRATIONS.VALIDATION',
  mixins: [ScaffoldMixin],
  props: {
    uuid: {
      type: String,
      required: true
    },
    user: {
      type: Object
    }
  },
  computed: {
    scaffoldedUser() {
      return [
        // email
        {
          class: 'user-info-item',
          children: [
            {
              tag: 'label',
              value: this.$_tr('labels.email')
            },
            {
              tag: 'p',
              value: this.user?.email
            }
          ]
        },
        // registration_status
        {
          class: 'user-info-item',
          children: [
            {
              tag: 'label',
              value: this.$_tr('labels.registration_status')
            },
            {
              tag: 'p',
              class: `registration-status--${this.user?.registration_status}`,
              value: this.user?.registration_status
                ? this.$_tr(
                    `registrationStatus.${this.user.registration_status}`
                  )
                : '-'
            }
          ]
        },
        // name
        {
          class: 'user-info-item',
          children: [
            {
              tag: 'label',
              value: this.$_tr('labels.name')
            },
            {
              tag: 'p',
              value: this.user?.name
            }
          ]
        },
        // firstname
        {
          class: 'user-info-item',
          children: [
            {
              tag: 'label',
              value: this.$_tr('labels.firstname')
            },
            {
              tag: 'p',
              value: this.user?.firstname
            }
          ]
        },
        // lastname
        {
          class: 'user-info-item',
          children: [
            {
              tag: 'label',
              value: this.$_tr('labels.lastname')
            },
            {
              tag: 'p',
              value: this.user?.lastname
            }
          ]
        },
        // functions
        {
          class: 'user-info-item',
          children: [
            {
              tag: 'label',
              value: this.$_tr('labels.function')
            },
            {
              tag: 'p',
              value: this.user?.functions?.title
            }
          ]
        },
        // company
        {
          class: 'user-info-item',
          children: [
            {
              tag: 'label',
              value: this.$_tr('labels.company')
            },
            {
              tag: 'p',
              value: this.user?.company
            }
          ]
        }
      ]
    }
  },
  methods: {
    async submitRegistration(status) {
      try {
        const params = {
          registration_message: '',
          registration_status: status
        }

        this.$_triggerToast({
          type: 'success',
          duration: 3000,
          text: this.$_tr('submittingValidation')
        })

        await http.put(`registration/update/${this.user.uuid}`, params)
      } catch (err) {
        throw new Error(err)
      } finally {
        this.$emit('onRegistrationUpdateSuccess')
      }
    }
  }
}
</script>

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

.registration-validation-admin-container {
  width: 100%;
  max-width: 768px;
  margin: var(--spacing-xl) auto 0;

  .user-info-item {
    label {
      display: block;
      margin-bottom: var(--spacing-s);
      text-transform: uppercase;
    }

    p {
      padding-bottom: var(--spacing-s);
      margin-bottom: var(--spacing-l);
      border-bottom: 1px solid var(--color-grey);
      color: var(--color-grey);
    }
  }

  .validation-actions-container {
    display: flex;
    justify-content: flex-end;

    .btn {
      margin-top: 0;
    }

    .btn.btn-refuse {
      margin: 0 16px;
      background-color: var(--color-invalid);
      border-color: var(--color-invalid);

      &:hover {
        background-color: var(--color-light);
        color: var(--color-invalid);
      }
    }
  }
}
</style>
