import DropdownIcon from"../assets/icons/dropdown.svg";class Picker{constructor(e){this.select=e,this.container=document.createElement("span"),this.buildPicker(),this.select.style.display="none",this.select.parentNode.insertBefore(this.container,this.select),this.label.addEventListener("click",(e=>{this.container.classList.toggle("ql-expanded")})),this.select.addEventListener("change",this.update.bind(this))}buildItem(e){let t=document.createElement("span");return t.classList.add("ql-picker-item"),e.hasAttribute("value")&&t.setAttribute("data-value",e.getAttribute("value")),e.textContent&&t.setAttribute("data-label",e.textContent),t.addEventListener("click",(e=>{this.selectItem(t,!0)})),t}buildLabel(){let e=document.createElement("span");return e.classList.add("ql-picker-label"),e.innerHTML=DropdownIcon,this.container.appendChild(e),e}buildOptions(){let e=document.createElement("span");e.classList.add("ql-picker-options"),[].slice.call(this.select.options).forEach((t=>{let l=this.buildItem(t);e.appendChild(l),t.hasAttribute("selected")&&this.selectItem(l)})),this.container.appendChild(e)}buildPicker(){[].slice.call(this.select.attributes).forEach((e=>{this.container.setAttribute(e.name,e.value)})),this.container.classList.add("ql-picker"),this.label=this.buildLabel(),this.buildOptions()}close(){this.container.classList.remove("ql-expanded")}selectItem(e,t=!1){let l=this.container.querySelector(".ql-selected");if(e!==l)if(null!=l&&l.classList.remove("ql-selected"),null!=e){if(e.classList.add("ql-selected"),this.select.selectedIndex=[].indexOf.call(e.parentNode.children,e),e.hasAttribute("data-value")?this.label.setAttribute("data-value",e.getAttribute("data-value")):this.label.removeAttribute("data-value"),e.hasAttribute("data-label")?this.label.setAttribute("data-label",e.getAttribute("data-label")):this.label.removeAttribute("data-label"),t){if("function"==typeof Event)this.select.dispatchEvent(new Event("change"));else if("object"==typeof Event){let e=document.createEvent("Event");e.initEvent("change",!0,!0),this.select.dispatchEvent(e)}this.close()}}else this.label.removeAttribute("data-value"),this.label.removeAttribute("data-label")}update(){let e;if(this.select.selectedIndex>-1){let t=this.container.querySelector(".ql-picker-options").children[this.select.selectedIndex];e=this.select.options[this.select.selectedIndex],this.selectItem(t)}else this.selectItem(null);let t=null!=e&&e!==this.select.querySelector("option[selected]");this.label.classList.toggle("ql-active",t)}}export default Picker;