<template>
    <v-sheet>
        <v-row dense>
            <v-col cols="3">
                <v-autocomplete
                    dense
                    hide-details="auto"
                    class="mt-0"
                    :items="countries"
                    outlined
                    label="Țara"
                    clearable
                    :no-data-text="__('Nu sunt țări în listă')"
                    :loading="countriesLoader.processing"
                    :disabled="countryDisabled"
                    v-model="country_id"
                >
                </v-autocomplete>
            </v-col>

            <v-col cols="4">
                <v-autocomplete
                    dense
                    hide-details="auto"
                    class="mt-0"
                    :items="regions"
                    outlined
                    label="Județul"
                    clearable
                    :no-data-text="__('Nu sunt județe în listă')"
                    :loading="regionsLoader.processing"
                    :disabled="regionDisabled"
                    v-model="region_id"
                >
                </v-autocomplete>
            </v-col>

            <v-col cols="5">
                <v-autocomplete
                    dense
                    hide-details="auto"
                    class="mt-0"
                    :items="cities"
                    outlined
                    label="Localitatea"
                    clearable
                    :no-data-text="__('Nu sunt localități în listă')"
                    :loading="citiesLoader.processing"
                    :disabled="cityDisabled"
                    v-model="city_id"
                >
                </v-autocomplete>
            </v-col>

        </v-row>
    </v-sheet>
</template>

<script>

    const Countries = require('./Requests/Countries.request').default;
    const Regions = require('./Requests/Regions.request').default;
    const Cities = require('./Requests/Cities.request').default;

    export default {

        props: {
            value: {required: true},
            initialRegionId: {default: null},
            initialCountryId: {default: null},
            initialCityId: {default: null},
        },
    
        data: () => ({

            countriesLoader: null,
            regionsLoader: null,
            citiesLoader: null,

            country_id: 1,
            region_id: null,
        }),

        computed: {
            city_id: {

                get: function() {
                    return this.value;
                },

                set: function(value) {
                    this.$emit('input', value);
                }
            },

            countries() {
                return this.countriesLoader.items;
            },

            regions() {
                return this.regionsLoader.items;
            },

            cities() {
                return this.citiesLoader.items;
            },

            countryDisabled() {
                return this.countriesLoader.processing
            },

            regionDisabled() {
                return this.countriesLoader.processing || 
                    this.regionsLoader.processing || 
                    ! this.country_id
            },

            cityDisabled() {
                return this.countriesLoader.processing || 
                    this.regionsLoader.processing || 
                    this.citiesLoader.processing || 
                    ! this.country_id ||
                    ! this.region_id;
            }
        },

        watch: {
            initialCountryId: function() {
                console.log('Initial CountryID:' + this.initialCountryId);
                this.country_id = this.initialCountryId;
            },

            country_id: function(newValue, oldValue) {
                this.region_id = null;
                this.city_id = null;
                this.regionsLoader.Load(newValue);
            },

            region_id: function(newValue, oldValue) {
                this.ciy_id = null;
                this.citiesLoader.Load(newValue);
            }
        },

        created() {
            this.countriesLoader = new Countries(this);
            this.regionsLoader = new Regions(this);
            this.citiesLoader = new Cities(this);

            this.countriesLoader.Load();

            let city_id = this.initialCityId, region_id = this.initialRegionId, country_id = this.initialCountryId;

            let i = setInterval( () => {
                if(! this.countriesLoader.processing )
                {
                    clearInterval(i);
                    this.country_id = !! country_id ? country_id : 1;
                    this.regionsLoader.Load(this.country_id);

                    if(region_id)
                    {
                        let j = setInterval( () => {
                            if(! this.regionsLoader.processing )
                            {
                                clearInterval(j);
                                this.region_id = region_id;
                                this.citiesLoader.Load(this.region_id);
                                if(city_id)
                                {
                                    let k = setInterval( () => {
                                        if(! this.citiesLoader.processing)
                                        {
                                            clearInterval(k);
                                            this.city_id = city_id;
                                        }
                                    }, 350);
                                }
                            }

                        }, 350);
                    }
                }
            }, 350);
           
        },

        name: 'CitySelector',
    }
</script>