<template lang="pug">
  vm-prompt(@vm-cancel="close" @vm-accept="saveRecord" @vm-close="close" @vm-action="deleteRecordConfirm(form)" :vm-action="form.deleted_at" :vm-action-text="$t('strings.delete')" :vm-accept-text="$t('strings.accept')" :vm-cancel-text="$t('strings.cancel')" :vm-buttons-hidden="form.deleted_at" :vm-is-valid="!$v.form.$invalid" :vm-active="isModalVisible" :vm-title='getTitle')
    vm-row(vm-align="center" vm-type="flex" vm-justify="space-between" vm-w="12" v-shortcuts="[{ shortcut: [ 'enter', ], callback: saveRecord, push: true, focus: true, disabled: $v.form.$invalid },]")
      vm-col(vm-justify="center", vm-align="center", vm-w=12)
        b-form-group
          vm-input(autofocus :placeholder='$t("users.name_placeholder")' :danger="$v.form.name.$invalid && $v.form.name.$model" :danger-text="$t('validation.required', { attribute: $t('users.name') })" v-model="form.name" :label='$t("users.name")')
      vm-col(vm-justify="center", vm-align="center", vm-w=12)
        b-form-group
          vm-input(:placeholder='$t("users.email_placeholder")' :danger="$v.form.email.$invalid && typeof $v.form.email.$model !== 'undefined'" :danger-text="$t('validation.email', { attribute: $t('users.email') })" v-model="form.email" :label='$t("users.email")' required)
      vm-col(vm-justify="center", vm-align="center", vm-w=12)
        b-form-group
          vm-input(:placeholder='$t("users.password_placeholder")' type="password" :danger="$v.form.password.$invalid && typeof $v.form.password.$model !== 'undefined'" :danger-text="$v.form.password.minLength ? $v.form.password.required ? '' : $t('validation.required', { attribute: $t('users.password') }) : $t('validation.min.string', { attribute: $t('users.password'), min: 4 })" :description-text='isAdd ? "" : $t("users.leave_empty")' v-model="form.password" :label='$t("users.password")' required)
      vm-col(vm-justify="center", vm-align="center", vm-w=12)
        b-form-group
          vm-input(:placeholder='$t("users.confirm_password_placeholder")' type="password" :danger="$v.form.confirm_password.$invalid && typeof $v.form.confirm_password.$model !== 'undefined'" :danger-text="$t('validation.same', { attribute: $t('users.confirm_password'), other: $t('users.password') })" v-model="form.confirm_password" :label='$t("users.confirm_password")' required)
      vm-col(vm-justify="center", vm-align="center", vm-w=12)
        b-form-group
          vm-select(:placeholder='$t("users.role_placeholder")' :danger="$v.form.role.$invalid && $v.form.role.$model" :danger-text="$t('validation.required', { attribute: $t('users.role') })" v-model="form.role" :label='$t("users.role")')
            vm-select-item(:key="index" :value="item.text" :text="item.text" v-for="(item,index) in roles")
</template>

<script>
import ModalMixin1 from '@/mixins/ModalMixin1'
import { required, requiredIf, minLength, email, sameAs } from 'vuelidate/lib/validators' // Ver documentacion
import { createNamespacedHelpers } from 'vuex'
const { mapGetters, mapActions } = createNamespacedHelpers('Users')

export default {
  name: 'ModalUsers',
  mixins: [ModalMixin1],
  data: () => ({
    roles: [
      {
        text: 'Admin',
        value: true
      },
      {
        text: 'Seller',
        value: false
      }
    ]
  }),
  validations () {
    return {
      form: {
        name: {
          required
        },
        email: {
          required,
          email
        },
        password: {
          required: requiredIf(password => {
            return this.isAdd
          }),
          minLength: minLength(4)
        },
        confirm_password: {
          required: requiredIf(confirmPassword => {
            return this.form.password
          }),
          sameAsPassword: sameAs('password')
        },
        role: {
          required
        }
      }
    }
  },
  computed: {
    ...mapGetters(['isModalVisible', 'catalog'])
  },
  async created () {
    this.getCatalog()
  },
  methods: {
    ...mapActions([
      'addRecord',
      'editRecord',
      'deleteRecord',
      'setModalVisible',
      'loadCatalog'
    ])
  }
}
</script>
