<template>
  <b-container>
    <b-modal
      id="installation_modal"
      ref="installation_modal"
      centered
      no-close-on-backdrop
      hide-header-close
      size="lg"
      title-tag="h6"
      header-class="border-bottom"
      footer-class="justify-content-md-end justify-content-center"
      :ok-title="$t('OrderHistory.Detail.eVoucher.Activation.Confirm')"
      cancel-variant="light"
      :busy="isInstalling"
      @shown="setAddressData"
      @ok="installing"
    >
      <div slot="modal-header">
        <div class="row justify-content-between font-weight-bold py-2">
          <div class="col">
            {{ $t('OrderHistory.Detail.eVoucher.Installation.InsertAddress') }}<br />
            {{ product.code }}: {{ product.name }}
          </div>
        </div>
      </div>
      <b-container class="eshop">
        <b-row class="my-2">
          <b-col class="col-12 col-md-3 pt-2">
            <label class="required">
              {{ $t('OrderHistory.Detail.eVoucher.Installation.RecipientName') }}
            </label>
          </b-col>
          <b-col class="col-lg-5 col-sm-10">
            <b-form-input
              v-validate="'required'"
              name="Recipient Name"
              type="text"
              v-model="recipientName"
              :class="{ input: true, 'text-danger': errors.has('Recipient Name') }"
            />
            <span v-show="errors.has('Recipient Name')" class="text-danger small">
              {{ errors.first('Recipient Name') }}
            </span>
          </b-col>
        </b-row>
        <b-row class="my-2">
          <b-col class="col-12 col-lg-3 pt-2">
            <label class="required">
              {{ $t('OrderHistory.Detail.eVoucher.Installation.MobileNumber') }}
            </label>
          </b-col>
          <b-col class="col-6 col-lg-2 col-sm-3 pr-0">
            <b-form-select v-model="mobileCode" class="fa-hand-pointer-o">
              <option value="null" disabled>
                {{ $t('Eshop.Order.GlobalWords.PleaseSelect') }}
              </option>
              <option v-for="(code, idx) in getMobileCountriesCodes" :value="code.value" :key="idx">
                {{ code.text }}
              </option>
            </b-form-select>
          </b-col>
          <b-col class="col-6 col-lg-3 col-sm-7 pl-1">
            <b-form-input
              v-validate="'required|numeric'"
              name="Recipient Contact"
              v-model="mobileNumber"
              :class="{ input: true, 'text-danger': errors.has('Recipient Contact') }"
              placeholder="eg 0123456789"
              type="text"
            />
            <span v-show="errors.has('Recipient Contact')" class="text-danger small">
              {{ errors.first('Recipient Contact') }}
            </span>
          </b-col>
        </b-row>
        <b-row class="my-2">
          <b-col class="col-12 col-md-3 pt-2">
            <label class="required text-nowrap">
              {{ $t('OrderHistory.Detail.eVoucher.Installation.Address1') }}
            </label>
          </b-col>
          <b-col class="col-lg-5 col-sm-10">
            <b-form-input
              v-validate="'required'"
              name="Address 1"
              type="text"
              v-model="address1"
              :class="{ input: true, 'text-danger': errors.has('Address 1') }"
            />
            <span v-show="errors.has('Address 1')" class="text-danger small">
              {{ errors.first('Address 1') }}
            </span>
          </b-col>
        </b-row>
        <b-row class="my-2">
          <b-col class="col-12 col-md-3 pt-2 text-nowrap">
            {{ $t('OrderHistory.Detail.eVoucher.Installation.Address2') }}
          </b-col>
          <b-col class="col-lg-5 col-sm-10">
            <b-form-input type="text" v-model="address2" />
          </b-col>
        </b-row>
        <b-row class="my-2">
          <b-col class="col-12 col-md-3 pt-2 text-nowrap">
            {{ $t('OrderHistory.Detail.eVoucher.Installation.Address3') }}
          </b-col>
          <b-col class="col-lg-5 col-sm-10">
            <b-form-input type="text" v-model="address3" />
          </b-col>
        </b-row>
        <b-row class="my-2">
          <b-col class="col-12 col-md-3 pt-2 text-nowrap">
            {{ $t('OrderHistory.Detail.eVoucher.Installation.Address4') }}
          </b-col>
          <b-col class="col-lg-5 col-sm-10">
            <b-form-input type="text" v-model="address4" />
          </b-col>
        </b-row>
        <b-row class="my-2">
          <b-col class="col-12 col-md-3 pt-2">
            <label class="required text-nowrap">
              {{ $t('OrderHistory.Detail.eVoucher.Installation.PostCode') }}
            </label>
          </b-col>
          <b-col class="col-lg-5 col-sm-10">
            <b-form-input
              v-validate="'required'"
              name="Zip Code"
              v-model="zipcode"
              :class="{ input: true, 'text-danger': errors.has('Zip Code') }"
              type="text"
            />
            <span v-show="errors.has('Zip Code')" class="text-danger small text-nowrap">
              {{ errors.first('Zip Code') }}
            </span>
          </b-col>
        </b-row>
        <b-row class="my-2">
          <b-col class="col-12 col-md-3 pt-2">
            <label class="required text-nowrap">
              {{ $t('OrderHistory.Detail.eVoucher.Installation.Country') }}
            </label>
          </b-col>
          <b-col class="col-lg-5 col-sm-10">
            <b-form-select
              v-validate="'required'"
              v-model="country"
              name="Country"
              :class="{ 'text-danger': errors.has('Country') }"
              disabled
              @change="setStates"
            >
              <option value="null" disabled>
                {{ $t('Eshop.Order.GlobalWords.SelectCountry') }}
              </option>
              <option v-for="(countryData, countryIdx) in getCountries" :value="countryData.value" :key="countryIdx">
                {{ countryData.text }}
              </option>
            </b-form-select>
            <span v-show="errors.has('Country')" class="text-danger small">
              {{ errors.first('Country') }}
            </span>
          </b-col>
        </b-row>
        <b-row class="my-2">
          <b-col class="col-12 col-md-3 pt-2">
            <label class="required text-nowrap">
              {{ $t('OrderHistory.Detail.eVoucher.Installation.State') }}
            </label>
          </b-col>
          <b-col class="col-lg-5 col-sm-10">
            <b-form-select
              v-validate="'required'"
              v-model="state"
              name="State"
              :class="{ 'text-danger': errors.has('State') }"
              @change="setCities"
            >
              <option value="null" disabled>
                {{ $t('Eshop.Order.GlobalWords.SelectState') }}
              </option>
              <option v-for="(stateData, stateIdx) in states" :value="stateData.id" :key="stateIdx">
                {{ stateData.name }}
              </option>
            </b-form-select>
            <span v-show="errors.has('State')" class="text-danger small">
              {{ errors.first('State') }}
            </span>
          </b-col>
        </b-row>
        <b-row class="my-2">
          <b-col class="col-12 col-md-3 pt-2">
            <label class="required text-nowrap">
              {{ $t('OrderHistory.Detail.eVoucher.Installation.City') }}
            </label>
          </b-col>
          <b-col class="col-lg-5 col-sm-10">
            <b-form-select
              v-validate="'required'"
              v-model="city"
              name="City"
              :class="{ 'text-danger': errors.has('City') }"
            >
              <option value="null" disabled>
                {{ $t('Eshop.Order.GlobalWords.SelectCity') }}
              </option>
              <option v-for="(cityData, cityIdx) in cities" :value="cityData.id" :key="cityIdx">
                {{ cityData.name }}
              </option>
            </b-form-select>
            <span v-show="errors.has('City')" class="text-danger small">
              {{ errors.first('City') }}
            </span>
          </b-col>
        </b-row>
      </b-container>
    </b-modal>
  </b-container>
</template>
<script>
import { mapActions, mapGetters } from 'vuex'
import { GeneralMixin } from '@/app/_global/mixins'

export default {
  name: 'OrderHistoryEvoucherInstallation',
  $_veeValidate: {
    validator: 'new',
  },
  mixins: [GeneralMixin],
  components: {},
  props: ['evoucher', 'product', 'preferredEmailId'],
  data() {
    return {
      isInstalling: false,
      recipientName: '',
      mobileCode: 60,
      mobileNumber: '',
      address1: '',
      address2: '',
      address3: '',
      address4: '',
      zipcode: '',
      country: null,
      state: null,
      city: null,
      states: [],
      cities: [],
    }
  },
  methods: {
    ...mapActions('orderhistory', ['setSalesVouchers']),
    ...mapActions(['loadMasterDataKeys']),
    installing(e) {
      e.preventDefault()
      this.$validator.validateAll().then(valid => {
        if (valid) {
          let address = {
            recipientName: this.recipientName,
            contact: this.mobileCode + this.mobileNumber,
            address1: this.address1,
            address2: this.address2,
            address3: this.address3,
            address4: this.address4,
            zipcode: this.zipcode,
            country: this.country,
            state: this.state,
            city: this.city,
          }
          this.product['install_address'] = address
          this.$refs.installation_modal.hide()
        }
      })
    },
    setStates(id) {
      this.states = this.getStateListByCountryId(id)
      this.state = null
      this.errors.clear()
    },
    setCities(id) {
      this.cities = null
      let states = this.getStateListByCountryId(this.country)
      states.forEach(state => {
        if (state.id === id) {
          this.cities = state.cities
        }
      })
      this.city = null
      this.errors.clear()
    },
    resetAll() {
      this.recipientName = ''
      this.mobileCode = 60
      this.mobileNumber = ''
      this.address1 = ''
      this.address2 = ''
      this.address3 = ''
      this.address4 = ''
      this.zipcode = ''
      this.country = this.getSelectedCountry.id
      this.state = null
      this.city = null
      this.cities = []
      this.activate = false
      this.errors.clear()
    },
    setAddressData() {
      if (
        typeof this.product.install_address !== 'undefined' &&
        typeof this.product.install_address.address1 !== 'undefined'
      ) {
        this.recipientName = this.product.install_address['recipientName']
        this.mobileCode = this.product.install_address['contact'].toString().substr(0, 2)
        this.mobileNumber = this.product.install_address['contact'].toString().substr(2)
        this.address1 = this.product.install_address['address1']
        this.address2 = this.product.install_address['address2']
        this.address3 = this.product.install_address['address3']
        this.address4 = this.product.install_address['address4']
        this.zipcode = this.product.install_address['zipcode']
        this.country = this.product.install_address['country']
        this.setStates(this.country)
        this.state = this.product.install_address['state']
        this.setCities(this.state)
        this.city = this.product.install_address['city']
      }
    },
    setPrefillData() {
      let memberData = this.getMyAccountMemberDetails
      if (memberData !== null) {
        this.recipientName = memberData.details.name
        if (memberData.contact_info.preferred_contact_id !== this.preferredEmailId) {
          this.mobileNumber = memberData.contact_info.mobile_1_num
        }
      }
    },
  },
  mounted() {
    this.country = this.getSelectedCountry.id
    this.states = this.getStateListByCountryId(this.country)
    this.setPrefillData()
  },
  computed: {
    ...mapGetters([
      'getCountries',
      'getSelectedCountry',
      'getStateListByCountryId',
      'getMobileCountriesCodes',
      'getMyAccountMemberDetails',
    ]),
  },
}
</script>
