<template lang="pug">
  vm-prompt(@vm-cancel="close" @vm-accept="saveRecord" @vm-close="close" @vm-action="deleteUserConfirm(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 { required, requiredIf, minLength, email, sameAs } from 'vuelidate/lib/validators' // Ver documentacion
import { createNamespacedHelpers } from 'vuex'
const { mapGetters, mapActions } = createNamespacedHelpers('Users')

export default {
  name: 'ModalUsers',
  props: {
    form: {
      type: Object
    },
    isAdd: {
      default: true,
      type: Boolean
    }
  },
  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
        }
      }
    }
  },
  async created () {
    this.getCatalog()
  },
  computed: {
    ...mapGetters([
      'isModalVisible',
      'usersCatalog'
    ]),
    getTitle () {
      return this.isAdd ? this.$t('users.add') : this.$t('users.edit')
    }
  },
  methods: {
    ...mapActions([
      'addUser',
      'editUser',
      'deleteUser',
      'setModalVisible',
      'loadCatalog'
    ]),
    saveRecord () {
      this.isAdd ? this.addUser(this.form) : this.editUser(this.form)
    },
    async deleteUserConfirm (user) {
      let t = this
      this.auxDeleteUser = () => {
        t.deleteUser(user)
      }
      this.$vm.dialog({
        color: 'danger',
        title: this.$t('front.delete_modal'),
        text: this.$t('front.delete_confirmation2', { model: this.$t('strings.user'), attribute: this.$t(user.name) }),
        accept: this.auxDeleteUser
      })
    },
    async getCatalog () {
      Object.keys(this.usersCatalog).forEach(e => this.loadCatalog({ url: e, filter: '' }))
    },
    autoCompleteFunc (value) {
      let payload = {}
      let column = value.target.parentElement.parentElement.getAttribute('column')
      let param = value.srcElement.value
      payload.url = value.target.parentElement.parentElement.getAttribute('url')
      payload.filter = `?${column}=${param}*&order_by=${column},asc`
      this.loadCatalog(payload)
    },
    close () {
      this.setModalVisible(false)
    }
  }
}
</script>
