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

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

function displayError(){
    const errorFirstname = document.getElementById('error_firstname');
    const firstname = document.getElementById('firstname');

    firstname.addEventListener('input', event => {
        if(errorFirstname){
            errorFirstname.classList.add('hidden');
        }
    });
}

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;
            
                if(addresses.length > 0){
                    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: ''
                    });
                }else{
                    this.addresses.push({
                        address_1: '',
                        address_2: '',
                        address_format: '',
                        address_id: '',
                        apelido: '',
                        city: '',
                        codigo_municipio: '',
                        company: '',
                        company_id: '',
                        complemento: '',
                        country: '',
                        country_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'));

            if(addresses != ""){
                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);
                });
            }else{
                this.onAddModule();
            }

            
            this.data_errors = errors;
            this.address_id = address_id;
        }
    })
}