<template lang="pug">
  vm-prompt(@vm-cancel="close" @vm-accept="saveRecord" @vm-close="close" @vm-action="deleteCustomerConfirm(form)" :vm-action="true" :vm-action-text="$t('strings.delete')" :vm-accept-text="$t('strings.accept')" :vm-cancel-text="$t('strings.cancel')" :vm-buttons-hidden="true" :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")
      vm-col(vm-justify="center", vm-align="center", vm-w=12)
        b-form-group
          vm-input(:placeholder='$t("customers.contact_placeholder")' :danger="!$v.form.contact.minLength" :danger-text="'Name must have at least 4 ' + $v.form.contact.$params.minLength + ' letters.'" v-model="form.contact" :label='$t("customers.contact")')
      vm-col(vm-justify="center", vm-align="center", vm-w=12)
        b-form-group
          vm-input(:placeholder='$t("customers.address_placeholder")'  v-model="form.address" :label='$t("customers.address")' required)
    vm-row(vm-align="center" vm-type="flex" vm-justify="space-between" vm-w="12")
      vm-col(vm-justify="center", vm-align="center", vm-w=12)
        b-form-group
          vm-input(:placeholder='$t("customers.state_placeholder")' v-model="form.state" :label='$t("customers.state")' required)
      vm-col(vm-justify="center", vm-align="center", vm-w=12)
        b-form-group
          vm-input(:placeholder='$t("customers.phone_placeholder")' v-model="form.phone" :label='$t("customers.phone")' required)
    vm-row(vm-align="center" vm-type="flex" vm-justify="space-between" vm-w="12")
      vm-col(vm-justify="center", vm-align="center", vm-w=12)
        b-form-group
          vm-input(:placeholder='$t("customers.email_placeholder")' :danger="!$v.form.email.email" danger-text="Field is email" v-model="form.email" :label='$t("customers.email")' required)
</template>

<script>
import { required, minLength, email } from 'vuelidate/lib/validators'
import { createNamespacedHelpers } from 'vuex'
const { mapGetters, mapActions } = createNamespacedHelpers('Customers')

export default {
  name: 'ModalCustomers',
  props: {
    form: {
      type: Object
    },
    isAdd: {
      default: true,
      type: Boolean
    }
  },
  validations: {
    form: {
      contact: {
        required,
        minLength: minLength(5)
      },
      email: {
        required,
        email
      }
    }
  },
  async created () {
    this.getCatalog()
  },
  computed: {
    ...mapGetters([
      'isModalVisible',
      'customersCatalog'
    ]),
    getTitle () {
      return this.isAdd ? this.$t('customers.add') : this.$t('customers.edit')
    }
  },
  methods: {
    ...mapActions([
      'addCustomer',
      'editCustomer',
      'deleteCustomer',
      'setModalVisible',
      'loadCatalog'
    ]),
    saveRecord () {
      this.isAdd ? this.addCustomer(this.form) : this.editCustomer(this.form)
    },
    async deleteCustomerConfirm (customer) {
      let t = this
      this.auxDeleteCustomer = () => {
        t.deleteCustomer(customer)
      }
      this.$vm.dialog({
        color: 'danger',
        title: this.$t('front.delete_modal'),
        text: this.$t('front.delete_confirmation', { attribute: this.$t(customer.contact) }),
        accept: this.auxDeleteCustomer
      })
    },
    async getCatalog () {
      Object.keys(this.customersCatalog).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>
