import Vue from 'vue'
import './SntLogin.scss'
import {
  VForm,
  VBtn,
  VSpacer
} from 'vuetify/lib'
import { mapGetters } from 'vuex'

export default Vue.extend({
  name: 'SntLogin',
  components: { VForm, VBtn, VSpacer },
  data () {
    return {
      telRules: [
        (v) => !!v || 'ป้อนเบอร์โทรศัพท์'
      ],
      postcodeRules: [
        (v) => !!v || 'ป้อนรหัสไปรษณีย์'
      ],
      submitting: false,
      valid: false,
      form: {
        tel: '',
        postcode: ''
      },
      customer: {
        id: null,
        address: '',
        addressList: []
      }
    }
  },
  computed: {
    ...mapGetters({
      subdomain: 'salePage/subdomain'
    }),
    isDemo () {
      return !this.subdomain
    }
  },
  methods: {
    close () {
      this.$refs.form.reset()
      this.$refs.form.resetValidation()
      this.$emit('click:close')
    },
    async submit () {
      if (this.isDemo) {
        return
      }
      const valid = this.$refs.form.validate()
      if (valid) {
        this.submitting = true
        const loggedIn = await this.$shipnity.login(this.form.tel, this.form.postcode)
        if (loggedIn) {
          this.$emit('submit', loggedIn)
        }
        this.submitting = false
      }
    }
  },
  template: `
    <div class="snt-login">
      <div class="snt-login__container">
        <div class="snt-login__title">
          <slot
            :close="close"
            name="header">
            เข้าสู่ระบบ
          </slot>
        </div>
        <v-form
          ref="form"
          v-model="valid"
          lazy-validation
          @submit.prevent="submit()">
          <div class="snt-login__text">
            <div class="snt-login__label">
              เบอร์โทรศัพท์
            </div>
            <snt-text-field
              v-model="form.tel"
              :rules="telRules"
              type="tel"
              maxlength="10"
              class="snt-login__input"
              autocomplete="off"
              autofocus
              dense
              outlined />
            <div class="snt-login__label">
              รหัสไปรษณีย์
            </div>
            <snt-text-field
              v-model="form.postcode"
              :rules="postcodeRules"
              autocomplete="off"
              type="tel"
              maxlength="5"
              class="snt-login__input"
              dense
              outlined />
          </div>
          <div class="snt-login__footer">
            <v-spacer />
            <v-btn
              class="snt-login__button-text mr-2"
              color="primary"
              text
              @click="close()">
              ยกเลิก
            </v-btn>
            <v-btn
              :loading="submitting"
              :disabled="!valid"
              type="submit"
              color="primary"
              class="snt-login__button"
              depressed>
              ยืนยัน
            </v-btn>
          </div>
        </v-form>
      </div>
    </div>
  `
})
