window.Event = new Vue();

Vue.component('region-select', {
	template: `
		<div class="block">
			<div class="field">
			    <label class="label">Seleccioná tu región</label>
		        <div class="control">
		        	<div class="select">
		        		<select @change="onRegionSelected" v-model="region">
				    		<option :disabled="isDefaultDisabled==1" value=null>Seleccionar</option>
							<option v-for="region in regiones" v-text="region" :name="region"></option>
						</select>
					</div>
				</div>
			</div>
		</div>`,
	data() {
		return {
			regiones: [],
			isDefaultDisabled: 0,
			region: null
		}
	},
	mounted() {
	    axios.get("/api/regiones").then(response => this.regiones = response.data);
  	},
  	methods: {
  		onRegionSelected() {
  			this.isDefaultDisabled = 1;
  			Event.$emit("region-seleccionada",this.region);
  		}
  	}
});

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

});

Vue.component('login', {
	template: `
		<div v-show="visible" class="block">
			<div class="field">
				<label class="label">Contraseña del barrio</label>
				<p class="control">
				    <input required class="input" type="password" name="password" placeholder="Contraseña del barrio">
				</p>
				<p class="help">Si no la sabés, consultá a tus compañerxs.</p>
			</div>
			<div class="field">
				<div class="control">
				    <input type="submit" class="button is-success" value="Ingresar">
				    </input>
			    </div>
		    </div>
		</div>`,
	data() {
		return {
			visible: false,
			gdc: null
		}
	},
	mounted() {
		Event.$on('gdc-seleccionado', (gdc) =>  {
			this.gdc = gdc;
			this.visible = true;
		});
	}
});

new Vue({
  el: '#root'
});