<template>
  <div class="user-new box columns">
    <div class="column is-5" v-if="user">
      <div class="field is-horizontal">
        <div class="field-label is-normal">
          <label class="label" v-t="'user.pseudo'"></label>
        </div>
        <div class="field-body">
          <div class="field">
            <p class="control">
              <input :readonly="isMainUser" class="input" type="text" v-model="newUser.userId" />
            </p>
          </div>
        </div>
      </div>
    </div>
    <div class="column is-5" v-if="newUser">
      <div class="field is-horizontal">
        <div class="field-label is-normal">
          <label class="label" v-t="'user.alias'"></label>
        </div>
        <div class="field-body">
          <div class="field">
            <p class="control">
              <input
                required
                class="input"
                type="text"
                maxlength="20"
                v-model="newUser.alias"
                :placeholder="newUser.userId"
              />
            </p>
            <p class="help is-primary">Nom utilisé sur ce compte</p>
            <p
              class="help is-primary"
            >{{ $tc('validation.max_char', maxChar(newUser), { max: maxChar(newUser) }) }}</p>
          </div>
        </div>
      </div>
    </div>
    <div class="column is-2" v-if="!isMainUser">
      <button class="button is-danger" @click="$emit('remove')">supprimer</button>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Model, Vue, Watch } from 'vue-property-decorator'
import { Getter } from 'vuex-class'
import IUser from '@/models/IUser'
import { slug } from '@/utils'

@Component
export default class UserNew extends Vue {
  @Getter
  public user!: IUser | null
  @Model('input', { type: Object, required: true })
  public newUser!: IUser

  public maxChar(user: IUser): number {
    return 20 - (user.alias ? user.alias.length : 0)
  }

  public get isMainUser(): boolean {
    if (!this.newUser) {
      return false
    }
    return !!this.user && this.user.userId === this.newUser.userId
  }
}
</script>

<style>
.user-new {
  margin: 5px 0;
}
</style>
