import{html as e,css as t,nothing as i}from"../../../lit/index.js";export const UIRenderPieces=function(s){return class extends s{constructor(){super(),this.hideGradeScale=!0,this.hideActiveStudentOverview=!0,this.hideActiveAssignment=!0,this.hideSettings=!0,this.hideRubricInfo=[],import("../../simple-popover/simple-popover.js"),import("./grade-book-student-block.js")}static get properties(){return{...super.properties,hideSettings:{type:Boolean},hideGradeScale:{type:Boolean},hideActiveStudentOverview:{type:Boolean},hideActiveAssignment:{type:Boolean},hideRubricInfo:{type:Array}}}static get styles(){return[super.styles,t`
          .top-controls simple-icon-button-lite {
            margin: 0;
            border-radius: 0;
            height: 36px;
          }
          .top-controls simple-icon-button-lite:not([disabled])::part(button) {
            outline: none;
            height: 36px;
            border-radius: 0;
            padding: 0 8px;
          }
          .top-controls
            simple-icon-button-lite:not([disabled])::part(button):focus,
          .top-controls
            simple-icon-button-lite:not([disabled])::part(button):hover {
            background-color: var(--simple-colors-default-theme-accent-11);
            outline: 2px solid var(--simple-colors-default-theme-accent-1);
            outline-offset: -2px;
            color: var(--simple-colors-default-theme-accent-1);
          }
          #activestudentbtn img,
          #activestudentbtn simple-icon-lite {
            --simple-icon-width: 32px;
            --simple-icon-height: 32px;
            width: 32px;
            height: 32px;
            border-radius: 50%;
            vertical-align: middle;
            margin-right: 4px;
          }
        `]}renderActiveStudentBtn(){return e`<simple-icon-button-lite
          @click="${this.toggleActiveStudentOverview}"
          id="activestudentbtn"
          ?disabled="${!this.ready}"
        >
          ${this.database.roster[this.activeStudent]&&this.database.roster[this.activeStudent].photo?e`<img
                src="${this.database.roster[this.activeStudent].photo}"
                loading="lazy"
              />`:e`<simple-icon-lite icon="social:person"></simple-icon-lite>`}
          <span class="hide-900">${this.t.activeStudent}</span>
        </simple-icon-button-lite>
        <simple-popover
          ?hidden="${this.hideActiveStudentOverview}"
          for="activestudentbtn"
          auto
        >
          <div>
            ${this.database.roster[this.activeStudent]?e` <grade-book-student-block
                  .student="${this.database.roster[this.activeStudent]}"
                ></grade-book-student-block>`:i}

            <div class="active-student-grade-history">
              ${this.activeStudentSubmissions.map((t=>e`
                  <button
                    .value="${t.assignmentIndex}"
                    @click="${this.studentLetterGradeHistoryClick}"
                    class="${this.activeAssignment===t.assignmentIndex?"activeAssignment":""}"
                  >
                    <letter-grade
                      mini
                      label="${t.assignmentName}"
                      .total="${t.assignmentPoints}"
                      .score="${t.studentScore}"
                      .value="${t.assignmentIndex}"
                    >
                    </letter-grade>
                  </button>
                `))}
            </div>
          </div>
        </simple-popover>`}toggleActiveStudentOverview(e){this.hideActiveStudentOverview=!this.hideActiveStudentOverview,this.hideActiveStudentOverview||(this.hideSettings=!0,this.hideActiveAssignment=!0,this.hideGradeScale=!0)}renderGradeScaleBtn(){return e` <simple-icon-button-lite
          icon="list"
          @click="${this.toggleGradeScale}"
          id="gradescalebtn"
          ?disabled="${!this.ready}"
        >
          <span class="hide-900">${this.t.gradingScale}</span>
        </simple-icon-button-lite>
        <simple-popover
          ?hidden="${this.hideGradeScale}"
          for="gradescalebtn"
          auto
        >
          <editable-table-display
            accent-color="${this.accentColor}"
            bordered
            column-header
            condensed
            disable-responsive
            scroll
            striped
          >
            <table>
              <tbody>
                <tr>
                  <td>${this.t.letterGrade}</td>
                  <td>${this.t.highRange}</td>
                  <td>${this.t.lowRange}</td>
                </tr>
                ${this.database.gradeScale.map((t=>e`
                    <tr>
                      <td>${t.letter}</td>
                      <td>${t.highRange}</td>
                      <td>${t.lowRange}</td>
                    </tr>
                  `))}
              </tbody>
            </table>
          </editable-table-display>
        </simple-popover>`}toggleGradeScale(e){this.hideGradeScale=!this.hideGradeScale,this.hideGradeScale||(this.hideSettings=!0,this.hideActiveAssignment=!0,this.hideActiveStudentOverview=!0)}renderSettingsBtn(){return e` <simple-icon-button-lite
          icon="settings"
          @click="${this.toggleSettings}"
          id="settings"
          ?disabled="${!this.ready}"
          class="divider-left"
        >
          <span class="hide-900">${this.t.settings}</span>
        </simple-icon-button-lite>
        <simple-popover
          ?hidden="${this.hideSettings}"
          for="settings"
          auto
          @value-changed="${this.settingChanged}"
        >
          <simple-fields-field
            value="${this.settings.photo}"
            type="checkbox"
            label="${this.t.photo}"
            name="photo"
          ></simple-fields-field>
          <simple-fields-field
            value="${this.settings.email}"
            type="checkbox"
            label="${this.t.email}"
            name="email"
          ></simple-fields-field>
          <simple-fields-field
            value="${this.settings.fname}"
            type="checkbox"
            label="${this.t.firstName}"
            name="fname"
          ></simple-fields-field>
          <simple-fields-field
            value="${this.settings.surname}"
            type="checkbox"
            label="${this.t.surname}"
            name="surname"
          ></simple-fields-field>
        </simple-popover>`}toggleSettings(e){this.hideSettings=!this.hideSettings,this.hideSettings||(this.hideGradeScale=!0,this.hideActiveAssignment=!0,this.hideActiveStudentOverview=!0)}renderActiveAssignmentBtn(){return e`<simple-icon-button-lite
          icon="assignment"
          @click="${this.toggleActiveAssignment}"
          id="activeassignmentbtn"
          ?disabled="${!this.ready}"
        >
          <span class="hide-900">${this.t.activeAssignment}</span>
        </simple-icon-button-lite>
        <simple-popover
          ?hidden="${this.hideActiveAssignment}"
          for="activeassignmentbtn"
          auto
        >
          ${this.database.assignments[this.activeAssignment]?e`
                <h3>
                  ${this.database.assignments[this.activeAssignment].name}
                </h3>
                ${this.t.dueDate}:
                <local-time
                  .datetime="${this.database.assignments[this.activeAssignment]._ISODueDate}"
                  month="short"
                  day="numeric"
                  year="numeric"
                  hour="numeric"
                  minute="numeric"
                  time-zone-name="short"
                >
                </local-time>
              `:i}
        </simple-popover>`}toggleActiveAssignment(e){this.hideActiveAssignment=!this.hideActiveAssignment,this.hideActiveAssignment||(this.hideSettings=!0,this.hideGradeScale=!0,this.hideActiveStudentOverview=!0)}renderRubricInfoBtn(t,i,s){return e`<simple-icon-button-lite
          icon="info"
          @click="${this.toggleRubricInfo}"
          id="rubricinfo${t}"
          data-id="${t}"
        >
          <span class="hide-900" data-id="${t}">${i}</span>
        </simple-icon-button-lite>
        <simple-popover
          ?hidden="${!this.hideRubricInfo[t]}"
          for="rubricinfo${t}"
          auto
        >
          <p style="max-width:20vw;">${s}</p>
        </simple-popover>`}toggleRubricInfo(e){this.hideRubricInfo[parseInt(e.target.getAttribute("data-id"))]=!this.hideRubricInfo[parseInt(e.target.getAttribute("data-id"))],this.requestUpdate()}renderDisplayModeBtn(){return e` ${this.displayModeData().map(((t,i)=>e`
          <simple-icon-button-lite
            icon="${t.icon}"
            @click="${this.toggleDisplayMode}"
            data-id="${i}"
            ?disabled="${this.displayMode===i}"
          >
            <span class="hide-900" data-id="${i}">${t.label}</span>
          </simple-icon-button-lite>
        `))}`}displayModeData(){return[{label:"Mode 1",icon:"view-array",layout:"1-1-2"},{label:"Mode 2",icon:"view-carousel",layout:"1-2-1"},{label:"Two windows",icon:"open-in-new",layout:"1-2"}]}toggleDisplayMode(e){this.displayMode=parseInt(e.target.getAttribute("data-id")),2==this.displayMode&&this.openWindow()}}};