import { html } from "lit";
import { PdfSelector } from "./pdf-selector";
import { IPdfDocument } from "primary/shell/src/api/pdf-viewer-manager/pdf-viewer-manager";
import { repeat } from "lit/directives/repeat.js";

export const template = (props: PdfSelector) => {
  const pdfitem = (pdf: IPdfDocument) => {
    return html`
    <div class="pdf-item">
      <dss-checkbox @onChange=${() => props.setActivePdf(pdf.id)}>
        <input
          slot="input"
          type="checkbox"
          aria-label="Label"
          .checked=${props.activePdfs.some((p) => p.id === pdf.id)}
        >
      </dss-checkbox>
      <div class="container">
        <dss-icon-button class="close-button" size="md" variant="error" icon="close" @click=${() => props.removePdf(pdf.id)}></dss-icon-button>
        <div class="data">
          <div class="pdf-name">${pdf.data.name || "Sense nom"}</div>
          <div class="pdf-date">${pdf.data.date || " "}</div>
        </div>
      </div>
    </div>
  `;
  };

  return html`
    <div>
        ${repeat(props.pdfList, (pdf: IPdfDocument) => pdfitem(pdf))}
    </div> 
  `;
};