import { html, nothing } from "lit";
import { ifDefined } from "lit/directives/if-defined.js";
import "./mer-spinner.lit.js";
import { tokenMap } from "./utils.js";
const DEFAULT_FILE_UPLOAD_STATE = "uploaded";
// /**
//  * Returns a skeleton element shown while a file is being uploaded.
//  *
//  * In Mercury, the loading state is visually represented in the footer,
//  * so this skeleton is currently unused. However, it is recommended to keep
//  * this function in the file in case the design changes and a visual loader
//  * inside the file container becomes necessary again.
//  *
//  * @param file - The file object containing metadata and upload state.
//  * @param fileFormat - The format type of the file (e.g., text, image, etc.).
//  * @returns A TemplateResult with the skeleton element or `nothing` if not loading.
//  */
// const fileSkeleton = (
//   file: ChatMessageFile,
//   fileFormat: keyof ChMimeTypeFormatMap
// ): TemplateResult | typeof nothing => {
//   return file.uploadState === "in-progress"
//     ? html`<div
//         part=${tokenMap({
//           [`file-skeleton format-${fileFormat} ${file.mimeType} ${
//             file.uploadState ?? DEFAULT_FILE_UPLOAD_STATE
//           }`]: true,
//           [file.extension!]: !!file.extension,
//           [file.parts!]: !!file.parts
//         })}
//       ></div>`
//     : nothing;
// };
const fileFooter = (file, fileFormat) => {
    return html `<div class="elevation-1" part="${tokenMap({
        [`file-footer format-${fileFormat} ${file.mimeType} ${file.uploadState ?? DEFAULT_FILE_UPLOAD_STATE}`]: true,
        [file.extension]: !!file.extension,
        [file.parts]: !!file.parts
    })}"><span part="file-caption">${file.caption}${file.extension && "." + file.extension.toLowerCase()} </span>${file.uploadState === "in-progress"
        ? html `<mer-spinner></mer-spinner>`
        : nothing}</div>`;
};
const getFileContainerParts = (file, fileFormat) => {
    return tokenMap({
        [`file-container format-${fileFormat} ${file.mimeType} ${file.uploadState ?? DEFAULT_FILE_UPLOAD_STATE}`]: true,
        [file.extension]: !!file.extension,
        [file.parts]: !!file.parts
    });
};
const getFileParts = (file, fileFormat) => tokenMap({
    [`file format-${fileFormat} ${file.mimeType} ${file.uploadState ?? DEFAULT_FILE_UPLOAD_STATE}`]: true,
    [file.extension]: !!file.extension,
    [file.parts]: !!file.parts
});
// TODO: Improve accessibility by exposing progress or spin states while
// uploading
export const customFileRenders = {
    audio: (file) => {
        return html `<li class="file-container" part="${getFileContainerParts(file, "audio")}"><audio aria-label="${ifDefined(file.accessibleName)}" part="${getFileParts(file, "audio")}" src="${ifDefined(file.uploadState === "in-progress" ? undefined : file.url)}" controls></audio>${fileFooter(file, "audio")}</li>`;
    },
    video: (file) => {
        return html `<li class="file-container" part="${getFileContainerParts(file, "video")}"><video aria-label="${ifDefined(file.accessibleName)}" part="${getFileParts(file, "video")}" src="${ifDefined(file.uploadState === "in-progress" ? undefined : file.url)}" controls></video>${fileFooter(file, "video")}</li>`;
    },
    image: (file) => {
        return html `<li class="file-container" part="${getFileContainerParts(file, "image")}"><img aria-label="${ifDefined(file.accessibleName)}" part="${getFileParts(file, "image")}" src="${file.url}" alt="${file.alternativeText ?? file.accessibleName ?? ""}" loading="lazy"> ${fileFooter(file, "image")}</li>`;
    },
    file: (file) => {
        const disabledWhileUploading = file.uploadState === "in-progress";
        return html `<li class="file-container" part="${getFileContainerParts(file, "file")}"><a aria-label="${ifDefined(file.accessibleName)}" role="${disabledWhileUploading ? "link" : nothing}" aria-disabled="${disabledWhileUploading ? "true" : nothing}" part="${getFileParts(file, "file")}" href="${disabledWhileUploading ? nothing : file.url}" target="_blank"></a> ${fileFooter(file, "file")}</li>`;
    }
};
