import Vue from "vue";
import formMixin from "@mixins/formMixin";

if (document.readyState === 'complete') {
    init();
} else {
    document.addEventListener('DOMContentLoaded', function () {
        init();
    });
}

function init() {
    const vm = new Vue({
        el: "#address-content",
        components: {
            BaseCep: () => import(/* webpackChunkName: "BaseCep" */ '@elements/BaseCep/index.vue'),
            BaseModal: () => import(/* webpackChunkName: "BaseModal" */ '@components/BaseModal/index.vue'),
            BaseInput: () => import(/* webpackChunkName: "BaseInput" */ '@elements/BaseInput/index.vue'),
        },
        mixins: [formMixin],
        data() {
            return {
                addresses: [],
                readonly: [],
                data_errors: [],
                updateComponent: 0,
                data_errors: [],
                allNickNames: [],
                address_id: '',
                showModal: false,
                addressDeleteIndex: '',
            }
        },
        watch:{
            data_errors(newValue){
                Object.keys(newValue).forEach((item) => {
                    Object.keys(this.data_errors[item]).forEach((module) => {
                        this.readonly[module] = false;
                    })
                })
            }
        },
        methods: {
            onAddModule() {
                const { addresses } = this;
                const addressModule = addresses;

                const { customer_id } = addressModule[addressModule.length - 1];

                this.addresses.push({
                    address_1: '',
                    address_2: '',
                    address_format: '',
                    address_id: '',
                    apelido: '',
                    city: '',
                    codigo_municipio: '',
                    company: '',
                    company_id: '',
                    complemento: '',
                    country: '',
                    country_id: '',
                    customer_id: customer_id,
                    firstname: '',
                    lastname: '',
                    logradouro: '',
                    logradouro: '',
                    postcode: '',
                    tipo_logradouro: '',
                    zone: '',
                    zone_code: '',
                    zone_id: ''
                });

                this.readonly.push(false);
            },
            onClose(){
                this.showModal = false;
            },
            deleteAddress(){
                this.addresses.splice(this.addressDeleteIndex, 1);
                this.readonly.splice(this.addressDeleteIndex, 1);
                this.showModal = false;
            },
            onEditModule(moduleIndex) {
                this.readonly[moduleIndex] = false;
                this.updateComponent += 1;
            },
            onRemoveModule(moduleIndex) {
                this.addressDeleteIndex = moduleIndex;
                this.showModal = true;
            },
            onInput(moduleIndex, error) {
                this.data_errors[error][moduleIndex] = "";
            },
            dataReturn(selectedValues, moduleIndex) {
                if(this.data_errors['error_address_postcode'][moduleIndex] && selectedValues.postcode != ""){
                    this.data_errors['error_address_postcode'][moduleIndex] = "";
                }
                
                if(this.data_errors['error_address_address_1'][moduleIndex] && selectedValues.address_1 != ""){
                    this.data_errors['error_address_address_1'][moduleIndex] = "";
                }

                if(this.data_errors['error_address_address_2'][moduleIndex] && selectedValues.address_2 != ""){
                    this.data_errors['error_address_address_2'][moduleIndex] = "";
                }

                if(this.data_errors['error_address_apelido'][moduleIndex] && selectedValues.apelido != ""){
                    this.data_errors['error_address_apelido'][moduleIndex] = "";
                }

                if(this.data_errors['error_address_city'][moduleIndex] && selectedValues.city != ""){
                     this.data_errors['error_address_city'][moduleIndex] = "";
                } 
                
                if(this.data_errors['error_address_complemento'][moduleIndex] && selectedValues.complemento != ""){
                    this.data_errors['error_address_complemento'][moduleIndex] = "";
                }

                if(this.data_errors['error_address_country'][moduleIndex]  && selectedValues.country != ""){
                    this.data_errors['error_address_country'][moduleIndex] = "";
                }
                
                if(this.data_errors['error_address_numero'][moduleIndex] && selectedValues.numero != ""){
                    this.data_errors['error_address_numero'][moduleIndex] = "";
                }

                if(this.data_errors['error_address_postcode'][moduleIndex] && selectedValues.postcode != ""){
                    this.data_errors['error_address_postcode'][moduleIndex] = "";
                }

                if(this.data_errors['error_address_zone'][moduleIndex] && selectedValues.zone_id != ""){
                    this.data_errors['error_address_zone'][moduleIndex] = "";
                }     
            },
        },
        mounted() {
            let addresses = JSON.parse(document.querySelector('[addresses]').getAttribute('addresses'));
            let errors = JSON.parse(document.querySelector('[errors]').getAttribute('errors'));
            let address_id = JSON.parse(document.querySelector('[address_id]').getAttribute('address_id'));

            Object.keys(addresses).forEach((item, index) => {
                if(address_id == addresses[item].address_id){
                    this.addresses.unshift(addresses[item]);
                }else{
                    this.addresses.push(addresses[item]);
                }
                this.readonly.push(true);
            });
            
            this.data_errors = errors;
            this.address_id = address_id;
        }
    })
}