/*! phoscon-app 2024-10-07 */

export const getDetailsView=constants=>{const DetailsView=Backbone.View.extend({el:"#details",template:_.template(document.getElementById("plug-details-template").innerHTML),initialize:function(){this.views=[],this.listenTo(app.groups,"change",this.updateGroupSelect)},render:function(model){this.model&&this.model.off("change"),this.model=model,this.el.innerHTML=this.template(this.model),this.icon=this.el.querySelector(".context-menu-icon").parentNode,this.menu=this.el.querySelector(".context-menu").parentNode,this.outer=this.el.querySelector(".context-menu-outer").parentNode,this.model.on("change",this.renderModelChange,this),this.labels={consumption:this.el.querySelector("#consumption-label"),current:this.el.querySelector("#current-label"),power:this.el.querySelector("#power-label"),voltage:this.el.querySelector("#voltage-label")},this.headNameEl=this.el.querySelector("#nameLabel"),this.swVersionEl=this.el.querySelector(".swversion-label"),this.swVersionRow=this.el.querySelector(".swversion"),this.model.get("swversion")||this.swVersionRow.classList.add("hidden");let mStates=this.model.get("state");Object.keys(this.labels).forEach(attr=>{if(attr in mStates){this.labels[attr].classList.remove("hidden"),this.labels[attr].querySelector("."+attr).innerText=mStates[attr]}else this.labels[attr].classList.add("hidden")});let img=this.el.querySelector("#detailImg"),icon=this.el.querySelector(".main-head .item-icon");return SVGInject(img,injectOptions),SVGInject(icon,injectOptions),this.updateGroupSelect(),loadLanguage(),this},renderModelChange:function(model){let mStates=model.changed;mStates&&(Object.keys(mStates).forEach(state=>{if(this.labels[state]){this.labels[state].querySelector("."+state).innerText=mStates[state]}}),this.headNameEl.textContent!=model.get("name")&&(this.headNameEl.textContent=model.get("name")),this.swVersionEl.textContent!=model.get("swversion")&&(this.swVersionEl.textContent=model.get("swversion")))},events:{"change #groupSelect":function(ev){let el=ev.currentTarget,idx=el?el.selectedIndex:null,gId=el&&idx?el.options[idx].getAttribute("data-gid"):null;gId&&this.service.send({type:constants.events.SELECT_GROUP_CHANGED,gId:gId})},"click .deleteBtn":function(event){this.service.send({type:"DELETE_CLICKED",mId:this.model.id})},"click #deletePlug_btn":function(event){this.el.querySelector(".modal-body span b").innerHTML=this.model.attributes.name},"click .context-menu-icon":function(event){this.icon.classList.contains("show-context")?this.icon.classList.remove("show-context"):this.icon.classList.add("show-context")},"click .context-menu":function(event){this.menu.classList.remove("show-context")},"click .context-menu-outer":function(event){this.outer.classList.remove("show-context")}},updateGroupSelect:function(){let addedGroups=app.groups.filter(g=>g.get("lights").includes(this.model.get("id")));if(-1!==addedGroups.indexOf(app.alloffgroup)&&addedGroups.splice(addedGroups.indexOf(app.alloffgroup),1),0!==addedGroups.length){this.el.classList.add("groups-added");var label=this.el.querySelector(".groups-added-label");this.el.querySelector(".groups-added-list").textContent=addedGroups.map(g=>g.get("name")).join(", "),1==addedGroups.length?label.textContent=translate("txt_plugAddedByGroup"):label.textContent=translate("txt_plugAddedByGroups")}else this.el.classList.remove("groups-added"),app.groups.forEach(group=>{let type=group.get("type"),dMS=group.get("devicemembership");if("LightGroup"!==type||0!==dMS.length)return;let view=new GroupOptionView({model:group});this.views.push(view)})},show:function(){this.el.classList.remove("hide")},hide:function(){this.el.classList.add("hide")}}),GroupOptionView=Backbone.View.extend({el:"#groupSelect",template:_.template(document.getElementById("group-option-template").innerHTML),initialize:function(){"Phoscon_All_Off"!==this.model.attributes.name&&(this.$el.append(this.template(this.model)),this.render())},render:function(){return this}});return new DetailsView};const injectOptions=SVGInject.setOptions({useCache:!1,copyAttributes:!0,makeIdsUnique:!1,afterInject:function(img,svg){img.getAttribute("viewBox")&&svg.setAttribute("viewBox","-5 -5 58 58")}});