import{css as e,html as t,LitElement as o}from"../../../lit/index.js";import{DDDSuper as l}from"../../d-d-d/d-d-d.js";import{DDDDataAttributes as i,DDDPulseEffect as n}from"../../d-d-d/lib/DDDStyles.js";import"../video-player.js";import"../../simple-icon/lib/simple-icon-button-lite.js";import"../../simple-icon/lib/simple-icon-lite.js";import"../../simple-icon/lib/simple-icons.js";import"../../hax-iconset/lib/simple-hax-iconset.js";import"../../simple-modal/simple-modal.js";import"../../simple-cta/simple-cta.js";class LecturePlayer extends(l(o)){static get styles(){return[super.styles,i,n,e`
        :host {
          font-family: var(--ddd-font-primary, sans-serif);
        }

        @media (max-width: 1200px) {
          .videoSection {
            grid-template-columns: 1fr;
          }
        }
        lecture-player {
          width: 100%;
          height: 100%;
        }
      `]}constructor(){if(super(),this.associatedNodes=new Object,this.videoPlayer=this.querySelector("video-player").outerHTML,this.videoInterval=null,this.activeIndex=null,console.log(globalThis.location.hash),globalThis.location.hash){var e=globalThis.location.hash.split("--")[0],t=globalThis.location.hash.split("--")[1]||this.associatedNodes["slide-1"];console.log(e,t),setTimeout((()=>{this.showModal(),console.log("show modal");let e=null,o=Object.values(this.associatedNodes);console.log(o.length);for(let l=0;l<o.length;l++){let i=o[l];console.log(i);let n=l<=o.length-1?o[l+1]:1/0;if(t>=i&&t<n){console.log("found current slide"+i+" "+n+" "+t),e=Object.keys(this.associatedNodes)[l],console.log(e),setTimeout((()=>{this.activeIndex=e}),3e3);break}if(l==o.length-1&&null===this.activeIndex){console.log("last slide"),this.activeIndex=Object.keys(this.associatedNodes)[0];break}}}),2e3)}globalThis.addEventListener("hashChange",(()=>{var[e,t]=globalThis.location.hash.split("--");"#lecture-player-video"!==e||t||(console.log("no timestamp"),this.showModal(),setTimeout((()=>{this.activeIndex="slide-1"}),1e3))}))}static get properties(){return{activeIndex:{type:String,reflect:!0},source:{type:String,reflect:!0},associatedNodes:{type:Object,reflect:!0},open:{type:Boolean,reflect:!0}}}firstUpdated(){const e=this.querySelectorAll("[data-lecture-slide]");console.log(e);const t=Array.from(e);t.sort(((e,t)=>parseInt(e.getAttribute("data-value"),10)-parseInt(t.getAttribute("data-value"),10))),t.forEach(((e,t)=>{e.id=`slide-${t+1}`,this.associatedNodes[e.id]=e.getAttribute("data-value"),console.log(e.id,e.getAttribute("data-value")),e.addEventListener("click",(()=>{this.activeIndex=e.id}))})),this.setJumbotronAttributes()}updated(e){super.updated(e),e.forEach(((e,t)=>{if("activeIndex"===t&&e!==this.activeIndex&&this.activeIndex){if(this.linked)return void(this.linked=!1);document.querySelector("video-player").playing||this.play,console.log("activeIndex changed to:",this.activeIndex),console.log(document.querySelector("#"+this.activeIndex)),this.seek(this.associatedNodes[this.activeIndex]),this.updateJumbotron(),this.updatePlaylist(),this.checkDisabledButtons()}}))}setJumbotronAttributes(){console.log("setJumbotronAttributes"),this.querySelectorAll("[data-lecture-slide]").forEach((e=>{let t=this.querySelector(`#${e.getAttribute("data-associatedID")}`);console.log(t),e.setAttribute("data-lecture-heading",t.textContent),e.setAttribute("data-lecture-content",this.getNextSiblingHTML(t));let o=globalThis.document.createElement("div");o.innerHTML=e.getAttribute("data-lecture-content"),o.querySelectorAll("[data-lecture-slide]").forEach((e=>{e.removeAttribute("id"),e.classList.add("no-pointer-events")})),e.setAttribute("data-lecture-content",o.innerHTML)}))}getNextSiblingHTML(e){console.log(e);let t="",o=e.nextSibling;console.log(o.nextSibling);let l=[];for(Object.keys(this.associatedNodes).forEach((e=>{console.log(e),l.push(e),l.push(this.querySelector(`#${e}`).getAttribute("data-associatedID"))})),l=l.filter((t=>t!==e.id&&t!==globalThis.document.querySelector(`[data-associatedID="${e.id}"]`).id)),console.log(l);o;){if(o&&o.nodeType===Node.ELEMENT_NODE&&o.id&&l.includes(o.id)){console.log("broke chain at "+o.id);break}console.log(o),t+=o.outerHTML||"",o=o.nextSibling}return t}addPrevNextListeners(){console.log("addPrevNextListeners");const e=globalThis.document.querySelector("#prevSlideBtn"),t=globalThis.document.querySelector("#nextSlideBtn");e.addEventListener("click",(()=>{const e=this.activeIndex.split("-")[1]>1?this.activeIndex.split("-")[1]-1:null;e&&(this.activeIndex="slide-"+e)})),t.addEventListener("click",(()=>{const e=globalThis.document.querySelectorAll("[data-lecture-slide][id]").length;console.log(e),console.log(this.activeIndex.split("-")[1]),console.log(parseInt(this.activeIndex.split("-")[1])+1),console.log(parseInt(this.activeIndex.split("-")[1])+1<e);const t=this.activeIndex.split("-")[1]<e?parseInt(this.activeIndex.split("-")[1])+1:null;t?this.activeIndex="slide-"+t:this.endVideo()}))}updateJumbotron(){console.log("updateJumbotron");const e=globalThis.document.querySelector(".jumbotron");console.log(e),e&&(e.innerHTML=""),console.log(this.activeIndex);const t=globalThis.document.querySelector(`#${this.activeIndex}`);if(console.log(t),t){const o=globalThis.document.createElement("h2");o.id="jumbotron-heading",o.innerText=t.getAttribute("data-lecture-heading"),e.appendChild(o);const l=globalThis.document.createElement("div");l.id="jumbotron-desc",l.innerHTML=t.getAttribute("data-lecture-content"),e.appendChild(l)}}updatePlaylist(){console.log("updatePlaylist");const e=globalThis.document.querySelector(".valueList");if(!e)return void console.error("ValueList element not found");e.innerHTML="",Object.keys(this.associatedNodes).forEach((t=>{console.log(t,this.associatedNodes[t]);this.associatedNodes[t];const o=globalThis.document.querySelector(`#${t}`),l=globalThis.document.createElement("button");l.classList.add("valueBtn"),l.textContent=o?o.getAttribute("data-lecture-heading"):"Missing Title",l.addEventListener("click",(()=>{this.activeIndex=t})),t===this.activeIndex&&l.classList.add("active"),e.appendChild(l)}));const t=e.querySelector(".active");t&&e.scrollTo({left:t.offsetLeft-125,behavior:"smooth"})}seek(e){console.log("seek to timestamp: ",e),this.open?setTimeout((()=>{globalThis.document.querySelector("#lecture-player-video").seek(e),globalThis.document.querySelector("#lecture-player-video").play(),console.log(e)}),3e3):(console.log("seeking to video player"),this.querySelector("video-player").play(),this.querySelector("video-player").seek(e))}play(){globalThis.document.querySelector("video-player"),document.querySelector("video-player")?globalThis.document.querySelector("video-player").play():this.querySelector("video-player").play()}checkDisabledButtons(){console.log("checkDisabledButtons");const e=globalThis.document.querySelector("#prevSlideBtn"),t=parseInt(this.activeIndex.split("-")[1]);1===t?e.setAttribute("disabled","true"):e.removeAttribute("disabled"),t!==globalThis.document.querySelectorAll("[data-lecture-slide]").length&&globalThis.document.querySelector("#nextSlideBtn").removeAttribute("disabled")}endVideo(){console.log("endVideo"),globalThis.document.querySelector("#lecture-player-video").pause(),globalThis.document.querySelector("#nextSlideBtn").setAttribute("disabled","true");let e=globalThis.document.createElement("div");e.setAttribute("data-primary","11"),e.innerHTML='<simple-cta class="endBtn" data-pulse data-primary="11">Close Lecture Player</simple-cta>',e.classList.add("endBtnContainer"),globalThis.document.querySelector(".jumbotron").appendChild(e),globalThis.document.querySelector(".endBtn").addEventListener("click",(()=>{globalThis.document.querySelector("simple-modal").close(),this.open=!1}));let t=globalThis.document.querySelector(".jumbotron");t.scrollTop=t.scrollHeight+500}showModal(){console.log("showModal");let e=globalThis.document.createElement("div");e.classList.add("modal-content"),e.innerHTML=`\n    <style>\n      simple-modal{\n        --simple-modal-width: 95%;\n        --simple-modal-height: 95%;\n        font-family: var(--ddd-font-primary, sans-serif);\n      }\n\n      .modal-content{\n        display: grid;\n        grid-template-rows: 1.5fr auto;\n        height: fit-content;\n        gap: var(--ddd-spacing-6);\n        padding: var(--ddd-spacing-4);\n      }\n\n      video-player{\n        max-width: 100%;\n        max-height: 100%;\n      }\n\n      .videoSection{\n        display: grid;\n        grid-template-columns: 1fr 1fr;\n        max-width: 100%;\n        height: 100%;\n        gap: var(--ddd-spacing-4);\n        height: 68vh;\n      }\n\n      .videoSection.small{\n        grid-template-columns: .7fr 1.3fr;\n      }\n\n      .videoSection.large{\n        grid-template-columns: 1.3fr .7fr;\n        height: 100%;\n        max-height: none;\n      }\n\n      .playlist{\n        display: grid;\n        grid-template-columns: .5fr 5fr .5fr;\n        gap: var(--ddd-spacing-2);\n        max-width: 100%;\n        height: fit-content;\n      }\n\n      .overflow-ellipsis{\n        max-width: 200px;\n        display: inline-block;\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        word-wrap: break-word;\n        word-break: break-word;\n      }\n\n      .valueList {\n        display: flex; /* Use flexbox to layout items in a row */\n        flex-wrap: nowrap; /* Prevent wrapping of items */\n        border: var(--ddd-border-xs);\n        border-color: var(--ddd-theme-default-coalyGray, black);\n        background: #bab8b8;\n        overflow-x: auto; /* Enable horizontal scrolling */\n        overflow-y: hidden; /* Hide vertical overflow */\n      }\n      \n      .valueBtn {\n        flex-shrink: 0; /* Prevent buttons from shrinking */\n        background: white;\n        border: none;\n        border-right: 1px solid black; /* Keep the border-right */\n        cursor: pointer;\n        font-size: 24px;\n        padding: 16px; /* Add padding to space out the buttons */\n        height: 75px;\n        width: 200px;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        white-space: nowrap;\n        font-family: var(--ddd-font-primary, sans-serif);\n      }\n\n      .valueBtn:not(:last-child){\n        border-right: 1px solid black;\n      }\n\n      .jumbotron{\n        display: flex;\n        flex-direction: column;\n        justify-content: start;\n        align-items: start;\n        height: 100%;\n        overflow-y: auto;\n        overflow-x: show;\n      }\n\n      #jumbotron-heading{\n        padding: 8px;\n        width: calc(100% - 16px);\n        margin: 8px 0;\n      }\n\n      #jumbotron-desc{\n        padding: 8px;\n        width: calc(100% - 32px);\n      }\n\n      .value-navigation-button{\n        background: white;\n        cursor: pointer;\n        padding: 4px;\n        height: fit-content;\n        margin: auto;\n      }\n      \n      .valueBtn.active{\n        background: #dfedf5;\n      }\n\n      .endBtnContainer{\n        display: flex;\n        flex-direction: column;\n        justify-content: center;\n        align-items: center;\n        height: 100%;\n        margin: 64px auto;\n      }\n\n      .lecture-control.active, .lecture-control:focus, .lecture-control:hover, .lecture-control:active{\n        color: var(--ddd-theme-default-beaverBlue, black);\n      }\n\n      .no-pointer-events{\n        pointer-events: none;\n      }\n      .lecture-mode-controls {\n        position: absolute;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        gap: var(--ddd-spacing-3);\n        padding: var(--ddd-spacing-2);\n        top: var(--ddd-spacing-2);\n        right: var(--ddd-spacing-20);\n      }\n      .lecture-mode-controls simple-icon-button-lite {\n        cursor: pointer;\n        --simple-icon-height: var(--ddd-icon-xs);\n        --simple-icon-width: var(--ddd-icon-xs);\n      }\n      @media (max-width: 1200px) {\n        .videoSection {\n          display: flex;\n          flex-direction: column;\n        }\n      }\n    </style>\n      <div class="videoSection normal">\n          ${this.videoPlayer}\n        <div class="jumbotron"></div>\n        <div class="lecture-mode-controls">\n        <simple-icon-button-lite class="lecture-control" id="lecture-size-small" icon="image:photo-size-select-large"></simple-icon-button-lite>\n        <simple-icon-button-lite class="lecture-control" id="lecture-size-normal" icon="image:switch-video"></simple-icon-button-lite>\n        <simple-icon-button-lite class="lecture-control" id="lecture-size-large" icon="image:photo-size-select-actual"></simple-icon-button-lite>\n      </div>\n      </div>\n      <div class="playlist">\n        <button class="value-navigation-button" id="prevSlideBtn"><simple-icon-lite icon="lrn:arrow-left"></simple-icon-lite></button>\n        <div class="valueList">\n        </div>\n        <button class="value-navigation-button" id="nextSlideBtn"><simple-icon-lite icon="lrn:arrow-right"></simple-icon-lite></button>\n      </div>\n    `,this.querySelector("video-player").setAttribute("hidden",!0);const t=new CustomEvent("simple-modal-show",{bubbles:!0,cancelable:!0,detail:{elements:{content:e}}});this.open=!0,dispatchEvent(t),setTimeout((()=>{document.querySelector("#lecture-size-large").addEventListener("click",(e=>{globalThis.document.querySelectorAll(".lecture-control").forEach((e=>{e.classList.remove("active")})),e.target.classList.toggle("active"),globalThis.document.querySelector(".videoSection").classList.add("large"),globalThis.document.querySelector(".videoSection").classList.remove("small"),globalThis.document.querySelector(".videoSection").classList.remove("normal")})),document.querySelector("#lecture-size-normal").addEventListener("click",(e=>{globalThis.document.querySelectorAll(".lecture-control").forEach((e=>{e.classList.remove("active")})),e.target.classList.toggle("active"),globalThis.document.querySelector(".videoSection").classList.add("normal"),globalThis.document.querySelector(".videoSection").classList.remove("small"),globalThis.document.querySelector(".videoSection").classList.remove("large")})),document.querySelector("#lecture-size-small").addEventListener("click",(e=>{globalThis.document.querySelectorAll(".lecture-control").forEach((e=>{e.classList.remove("active")})),e.target.classList.toggle("active"),globalThis.document.querySelector(".videoSection").classList.add("small"),globalThis.document.querySelector(".videoSection").classList.remove("normal"),globalThis.document.querySelector(".videoSection").classList.remove("large")})),document.querySelector("simple-modal .modal-content .videoSection video-player").setAttribute("id","lecture-player-video"),globalThis.addEventListener("simple-modal-closed",(()=>{this.querySelector("video-player").removeAttribute("hidden"),this.open=!1}))}),3e3)}render(){return t`
      <simple-cta id="lectureActivation">Open Lecture Player</simple-cta>
      ${this.open?t``:t`<slot></slot>`}
    `}}globalThis.customElements.define("lecture-player",LecturePlayer);