/**
 * Komponenta s nadpisem bloku a skupiny radiobuttonu misto Selectu
 */


/* 
TODO: @rowfocustoggle
pokud je hidelist



*/







Vue.component('slidedown-option', {
	template: `
		<div class="slidedownselect" :class="{ active: hidelist==false }">
            <div class="selectheader">
					<div class="txtrowindex">{{txtrowindex}}</div>
                    <div class="headertext pointer" @click="ontoggleclick()">{{ header }}</div>
                    <div class="expandbtn pointer" @click="ontoggleclick()" >
						{{ hidelist == false ? '-':'+' }}
					</div>  
             </div>
			<!--<h3 @click="onexpandclick()" class="pointer" >{{ header }}</h3>-->
			<h4 class="txtvalue pointer" name="" :value="value"  @click="onexpandclick" v-if="hidelist==true">{{ showtxtname() }}</h4>

			<!--<div class="needselect pointer" @click="onexpandclick()" v-if="value==''"> Vyberte...</div>-->


			<transition name="expand" >
            <div class="ioptionlist" v-show="hidelist==false" :key="xkey" >
				<div class="ioptions" v-for="(item,key) in options" :key="xkey+'_'+key" >
					<div class="ioption"  v-show="isRadioEnabled(item.key,setindex,rowindex,key)">
						<label class="radioselect pointer">
							<!-- {{xkey}} {{key}}-->
							<input type="radio" class="optioninput" :checked="isequal(item.key)" v-on:click="onchange(item)" ></input>
							<span class="optiontext">{{item.name}}</span>
						<!--<span v-if="isInputDisabled(item.key)">*</span>-->
						<!--<span v-show="isRadioEnabled(item.key,setindex,rowindex,key)">[x]</span>-->
						</label>
					</div>
				</div>
            </div>
			</transition>
        </div> `,
	//jmeno formulare, text, volby, vybrana hodnota
	props: ['header', 'options', 'name', 'setindex', 'rowindex', 'value', 'xkey', 'hidelist','txtvalue'],
	methods: {
		//pokud zmenim ja, nikoliv zmena z rodice
		onchange(item) {
			// item jsou data radiobuttonu, v this je cely blok
			this.txtname = item.name;
			//this.hidelist=true;
			this.$emit('changed', item.key, this.name, this.setindex, this.rowindex,item);
            // this.$emit('rowfocus', null, null);

			//urcite existuje lepsi zpusob jak to adresovat (reference?)
		},
		onexpandclick(item) {
			//alert(this.rowindex);
			//this.hidelist=false;
			this.$emit('rowfocus', this.setindex, this.rowindex);
		},

		//pokud je aktivni zavri, jinak otevri
		//zavri=$parent.xindex={set:setnr,row:rownr};
		ontoggleclick() {
			// alert(this.setindex+','+this.rowindex);
			//this.hidelist=false;
			this.$emit('rowfocustoggle', this.setindex, this.rowindex, this.hidelist);
		},


		isequal(param1) {
			var param2 = this.value;
			var r = undefined;
			if (param1 === param2) {
				r = true;
			} else {
				r = false;
			}
			return r;
		},
		isRadioEnabled(keyword,setindex, rowindex,radioindex) {
			let enabled = this.$parent.isRadioEnabled(keyword, setindex,rowindex,radioindex);
			return enabled;

		},

		isInputDisabled(keyword) {
			//funguje nejak divne. ja potrebuju cely formular a tohle mi vrati disabled pro 1 aktualni select  
			//zrejme potrebuju refreshovat cely blok()
			//				console.log("komptDisabled",keyword,this.setindex);//
			//var disabled=true;
			let disabled = this.$parent.isOptionDisabled(keyword, this.setindex);
//			console.log('keyword:'+keyword,'set:'+ this.setindex,'disabled:'+ disabled);
//			console.log('isInputDisabled set:'+ this.setindex,keyword,disabled);
			return disabled;
		},
		showtxtname() {
			//console.log(this.value, this.txtname);
			if (this.value !== '') {
				//txtname = this.txtname;
			}
			else {
				this.txtname = "";
			}
			return this.txtname;
		},
        refresh(){
            //console.log("refresh");
            // this.txtname=this.findNameByKey();
            

            //this.$forceUpdate();
        },
        // findNameByKey(srchkey) { //najde nazev podle tagu v configu. uz nepouzivame.
        //     // var value = this.value;
        //     var foundOption = this.options.find(function(srchkey) {
        //       return option.key === value;
        //     });
          
        //     if (foundOption) {
        //       return foundOption.name;
        //     } else {
        //       console.log ("Name not found");
        //     }
        //   },

		 findValueByKey(key) {
			var arr = this.options;
			for (let i = 0; i < arr.length; i++) {
			  if (arr[i].key === key) {
				return arr[i].name;
			  }
			}
			return null; // Return null if the key is not found in the array
		  }



	},
	computed: {
		txtrowindex(){
			return String(this.rowindex+1).padStart(2, '0');
		}
	},
	watch: { 
        value: function(newVal, oldVal) { 
		  this.txtname=this.findValueByKey(newVal);	
        }
      },

	data() {
		return {
			   txtname: this.txtname,
		}
	}

});



/* --------------------------------------------------------------------------
v puvodnim skriptu odesilame takto:

$.post( 
		"///core/modules/api-shop.php",
		{cmd:"addItem",pcsadd:ks,itemid:itemnr},
		function( data ) {
			   basketbox.$data.visible=true;
			   pub.tools=data;			   
		}
		);


 -------------------------------------------------------------------------- */