window.Event = new Vue();

Vue.component('region-select', {
	template: `
		<div class="block">
		    <label class="label">Seleccioná tu región</label>
	        <div class="select">
	        	<select>
			    	<option>Seleccionar</option>
					<region-option v-for="region in regiones" v-text="region" :name="region"></region-option>
				</select>
			</div>
		</div>`,
	data() {
		return {
			regiones: []
		}
	},
	mounted() {
	    axios.get("/api/regiones").then(response => this.regiones = response.data);
  	}
});

Vue.component('region-option', {
	template: `<option @click="onRegionClicked""></option>`,
  	methods: {
  		onRegionClicked() {
  			Event.$emit("region-seleccionada",this.$attrs.name);
  		}
  	}
});

Vue.component('barrio-select', {
	template: `
		<div v-show="visible" class="block">
			<label class="label">Seleccioná tu grupo de compra</label>
			<div class="select">
	        	<select>
			    	<option>Seleccionar</option>
					<gdc-option v-for="grupo in gdc" v-text="grupo.nombre" :name="grupo.nombre"></gdc-option>
				</select>
			</div>
		</div>`,
	data() {
		return {
			visible: false,
			region: null,
			gdc: []
		}
	},
	mounted() {
  		Event.$on('region-seleccionada', (region)=>  {
  			this.fillGDC(region);
  			this.visible = true;
  		});
	},
	methods : {
		fillGDC(region) {
			this.region = region;
	    	axios.get("/api/grupos-de-compra").then(response => {
	    		this.gdc = response.data[this.region];
	    	});

		}
	}

});

Vue.component('gdc-option', {
	template: `<option @click="onGDCClicked""></option>`,
  	methods: {
  		onGDCClicked() {
  			Event.$emit("gdc-seleccionado",this.$attrs.name);
  		}
  	}
});

new Vue({
  el: '#root',
  mounted() {
	Event.$on('gdc-seleccionado', (gdc) =>  {
		console.log('se seleccionó el gdc ' + gdc);
	});
}
});