import{html as t,LitElement as e}from"../../../lit/index.js";import{GradeBookStore as i}from"./grade-book-store.js";import{I18NMixin as s}from"../../i18n-manager/lib/I18NMixin.js";import{autorun as o,toJS as n}from"../../../mobx/dist/mobx.esm.js";import{validURL as r,cleanVideoSource as a}from"../../utils/utils.js";class GradeBookPopUp extends(s(e)){constructor(){super(),this.t={studentSubmission:"Student submission",openInNewWindow:"Open in new window",submitted:"Submitted"},o((()=>{this.activeSubmission=n(i.activeSubmission)}))}createRenderRoot(){return this}changeActive(t){const e=t.target.value.split("-");switch(e[0]){case"prev":i[`active${e[1]}`]--;break;case"next":i[`active${e[1]}`]++}}render(){return t`
      <style>
        grade-book-pop-up .shortcut-btns {
          position: sticky;
          background-color: var(
            --simple-colors-default-theme-accent-12,
            #001333
          );
          color: var(--simple-colors-default-theme-accent-1, #e2ecff);
          height: 36px;
          vertical-align: middle;
          width: 100%;
          display: flex;
        }
        grade-book-pop-up .shortcut-btns button {
          background: transparent;
          margin: 0 10px;
          padding: 4px 8px;
          font-size: 12px;
          color: var(--simple-colors-default-theme-accent-1, #e2ecff);
          border: none;
          outline: 1px solid white;
          cursor: pointer;
        }
        .active-submission {
          overflow: hidden;
          /* 16:9 aspect ratio */
          padding-top: 56.25%;
          position: relative;
        }

        .active-submission iframe {
          border: 0;
          height: 100%;
          left: 0;
          position: absolute;
          top: 0;
          width: 100%;
        }
      </style>
      <div class="shortcut-btns">
        <button @click="${this.changeActive}" value="prev-Student">
          Previous student
        </button>
        <button @click="${this.changeActive}" value="next-Student">
          Next student
        </button>
        <button @click="${this.changeActive}" value="prev-Assignment">
          Previous assignment
        </button>
        <button @click="${this.changeActive}" value="next-Assignment">
          Next assignment
        </button>
      </div>
      <div class="assignment-container">
        ${this.renderStudentSubmission(this.activeSubmission)}
      </div>
    `}renderStudentSubmission(e){let s=t`<h3>${this.t.studentSubmission}</h3>
      ${this.t.submitted}
      <relative-time
        .datetime="${i.database.assignments[i.activeAssignment]._ISODueDate}"
      ></relative-time> `;return r(e)?t`${s}<a
          href="${e}"
          target="_blank"
          rel="noopener noreferrer"
        >
          <button>${this.t.openInNewWindow}</button></a
        >
        <div class="active-submission">
          <iframe
            width="560"
            height="315"
            loading="lazy"
            src="${a(e)}"
            frameborder="0"
            allow="encrypted-media;"
            allow="autoplay; encrypted-media; fullscreen; picture-in-picture"
          ></iframe>
        </div>`:(import("../../md-block/md-block.js"),t`${s}
        <div class="active-submission">
          <md-block .markdown="${e}"></md-block>
        </div>`)}static get tag(){return"grade-book-pop-up"}static get properties(){return{...super.properties,activeSubmission:{type:String},data:{type:String}}}}customElements.define(GradeBookPopUp.tag,GradeBookPopUp);export{GradeBookPopUp};