'use strict';

var index = require('./index-C_OnxXhP.js');
var extensionMapping = require('./extension-mapping-CvK-Mz3f.js');
var fileExtension = require('./file-extension-DolkaRwB.js');

// Copy of file icon names from lime-elements.
// Source: lime-elements/src/components/file/icons.ts
//
// Stencil doesn't support exporting utility functions from a component
// library, so we duplicate them here until a proper shared solution exists.
const DEFAULT_ICON = 'file';
const CALENDAR_ICON = 'tear_off_calendar';
const EMAIL_ICON = 'email';
const HTML_ICON = 'internet';
const TEXT_ICON = 'text_box';
const EXCEL_ICON = 'ms_excel_copyrighted';
const WORD_ICON = 'ms_word_copyrighted';
const POWERPOINT_ICON = 'ms_powerpoint_copyrighted';
const IMAGE_ICON = 'picture';
const PHOTO_ICON = 'camera';
const VECTOR_GRAPHIC_ICON = 'vector';
const PRESENTATION_ICON = 'presentation_filled';
const DOCUMENT_ICON = 'overview_pages_2';
const SPREADSHEET_ICON = 'data_sheet';
const AUDIO_ICON = 'audio_wave';
const VIDEO_ICON = 'video_file';
const COMPRESSED_ICON = 'condom_package';
const MESSAGE_ICON = 'ms_outlook_copyrighted';
const DATA_ICON = 'database';
const DEFAULT_FILE_ICON = DEFAULT_ICON;
const filetypeIconTable = {
    msg: MESSAGE_ICON,
    ics: CALENDAR_ICON,
    ical: CALENDAR_ICON,
    icalendar: CALENDAR_ICON,
    ifb: CALENDAR_ICON,
    email: EMAIL_ICON,
    eml: EMAIL_ICON,
    oft: EMAIL_ICON,
    ost: EMAIL_ICON,
    emlx: EMAIL_ICON,
    html: HTML_ICON,
    xml: HTML_ICON,
    txt: TEXT_ICON,
    rtf: TEXT_ICON,
    dot: WORD_ICON,
    doc: WORD_ICON,
    docx: WORD_ICON,
    dotx: WORD_ICON,
    docm: WORD_ICON,
    dotm: WORD_ICON,
    odt: DOCUMENT_ICON,
    pages: DOCUMENT_ICON,
    pdf: 'PDF_2',
    ppt: POWERPOINT_ICON,
    pot: POWERPOINT_ICON,
    pps: POWERPOINT_ICON,
    pptx: POWERPOINT_ICON,
    pptm: POWERPOINT_ICON,
    potx: POWERPOINT_ICON,
    potm: POWERPOINT_ICON,
    ppam: POWERPOINT_ICON,
    ppsx: POWERPOINT_ICON,
    ppsm: POWERPOINT_ICON,
    sldx: POWERPOINT_ICON,
    sldm: POWERPOINT_ICON,
    odp: PRESENTATION_ICON,
    key: PRESENTATION_ICON,
    xls: EXCEL_ICON,
    xlsx: EXCEL_ICON,
    csv: SPREADSHEET_ICON,
    numbers: SPREADSHEET_ICON,
    jpg: PHOTO_ICON,
    jpeg: PHOTO_ICON,
    heic: PHOTO_ICON,
    bmp: IMAGE_ICON,
    png: IMAGE_ICON,
    gif: IMAGE_ICON,
    psd: 'adobe_photoshop_copyrighted',
    ai: 'adobe_illustrator_copyrighted',
    svg: VECTOR_GRAPHIC_ICON,
    svgz: VECTOR_GRAPHIC_ICON,
    ep: VECTOR_GRAPHIC_ICON,
    eps: VECTOR_GRAPHIC_ICON,
    sketch: VECTOR_GRAPHIC_ICON,
    mp3: AUDIO_ICON,
    wav: AUDIO_ICON,
    wma: AUDIO_ICON,
    ogg: AUDIO_ICON,
    avi: VIDEO_ICON,
    flv: VIDEO_ICON,
    h264: VIDEO_ICON,
    mov: VIDEO_ICON,
    mp4: VIDEO_ICON,
    mwv: VIDEO_ICON,
    zip: COMPRESSED_ICON,
    '7z': COMPRESSED_ICON,
    rar: COMPRESSED_ICON,
    json: 'json',
    yaml: DATA_ICON,
    sql: DATA_ICON,
    db: DATA_ICON,
    dbf: DATA_ICON,
};

// Copy of file icon fill colors from lime-elements.
// Source: lime-elements/src/components/file/icon-fill-colors.ts
//
// Stencil doesn't support exporting utility functions from a component
// library, so we duplicate them here until a proper shared solution exists.
const DEFAULT_ICON_FILL_COLOR = 'rgb(var(--color-gray-dark))';
const CALENDAR_ICON_FILL_COLOR = 'rgb(var(--color-cyan-dark))';
const EMAIL_ICON_FILL_COLOR = 'rgb(var(--color-gray-dark))';
const HTML_ICON_FILL_COLOR = 'rgb(var(--color-blue-dark))';
const TEXT_ICON_FILL_COLOR = 'rgb(var(--color-yellow-darker))';
const EXCEL_ICON_FILL_COLOR = 'rgb(var(--color-green-dark))';
const POWERPOINT_ICON_FILL_COLOR = 'rgb(var(--color-coral-dark))';
const WORD_ICON_FILL_COLOR = 'rgb(var(--color-sky-dark))';
const IMAGE_ICON_FILL_COLOR = 'rgb(var(--color-lime-dark))';
const VECTOR_GRAPHIC_FILL_COLOR = 'rgb(var(--color-magenta-dark))';
const PRESENTATION_ICON_FILL_COLOR = 'rgb(var(--color-blue-dark))';
const DOCUMENT_ICON_FILL_COLOR = 'rgb(var(--color-orange-dark))';
const SPREADSHEET_ICON_FILL_COLOR = 'rgb(var(--color-green-dark))';
const AUDIO_ICON_FILL_COLOR = 'rgb(var(--color-indigo-dark))';
const VIDEO_ICON_FILL_COLOR = 'rgb(var(--color-red-dark))';
const COMPRESSED_ICON_FILL_COLOR = 'rgb(var(--color-brown-default))';
const MESSAGE_ICON_FILL_COLOR = 'rgb(var(--color-yellow-dark))';
const PDF_ICON_FILL_COLOR = 'rgb(var(--color-red-dark))';
const DATA_ICON_FILL_COLOR = 'rgb(var(--color-glaucous-dark))';
const DEFAULT_ICON_FILL = DEFAULT_ICON_FILL_COLOR;
const filetypeFillColorTable = {
    msg: MESSAGE_ICON_FILL_COLOR,
    ics: CALENDAR_ICON_FILL_COLOR,
    ical: CALENDAR_ICON_FILL_COLOR,
    icalendar: CALENDAR_ICON_FILL_COLOR,
    ifb: CALENDAR_ICON_FILL_COLOR,
    email: EMAIL_ICON_FILL_COLOR,
    eml: EMAIL_ICON_FILL_COLOR,
    oft: EMAIL_ICON_FILL_COLOR,
    ost: EMAIL_ICON_FILL_COLOR,
    emlx: EMAIL_ICON_FILL_COLOR,
    html: HTML_ICON_FILL_COLOR,
    xml: HTML_ICON_FILL_COLOR,
    txt: TEXT_ICON_FILL_COLOR,
    rtf: TEXT_ICON_FILL_COLOR,
    dot: WORD_ICON_FILL_COLOR,
    doc: WORD_ICON_FILL_COLOR,
    docx: WORD_ICON_FILL_COLOR,
    dotx: WORD_ICON_FILL_COLOR,
    docm: WORD_ICON_FILL_COLOR,
    dotm: WORD_ICON_FILL_COLOR,
    odt: DOCUMENT_ICON_FILL_COLOR,
    pages: DOCUMENT_ICON_FILL_COLOR,
    pdf: PDF_ICON_FILL_COLOR,
    ppt: POWERPOINT_ICON_FILL_COLOR,
    pot: POWERPOINT_ICON_FILL_COLOR,
    pps: POWERPOINT_ICON_FILL_COLOR,
    pptx: POWERPOINT_ICON_FILL_COLOR,
    pptm: POWERPOINT_ICON_FILL_COLOR,
    potx: POWERPOINT_ICON_FILL_COLOR,
    potm: POWERPOINT_ICON_FILL_COLOR,
    ppam: POWERPOINT_ICON_FILL_COLOR,
    ppsx: POWERPOINT_ICON_FILL_COLOR,
    ppsm: POWERPOINT_ICON_FILL_COLOR,
    sldx: POWERPOINT_ICON_FILL_COLOR,
    sldm: POWERPOINT_ICON_FILL_COLOR,
    odp: PRESENTATION_ICON_FILL_COLOR,
    key: PRESENTATION_ICON_FILL_COLOR,
    xls: EXCEL_ICON_FILL_COLOR,
    xlsx: EXCEL_ICON_FILL_COLOR,
    csv: DEFAULT_ICON_FILL_COLOR,
    numbers: SPREADSHEET_ICON_FILL_COLOR,
    bmp: IMAGE_ICON_FILL_COLOR,
    jpg: IMAGE_ICON_FILL_COLOR,
    jpeg: IMAGE_ICON_FILL_COLOR,
    heic: IMAGE_ICON_FILL_COLOR,
    png: IMAGE_ICON_FILL_COLOR,
    gif: IMAGE_ICON_FILL_COLOR,
    psd: PRESENTATION_ICON_FILL_COLOR,
    ai: DOCUMENT_ICON_FILL_COLOR,
    svg: VECTOR_GRAPHIC_FILL_COLOR,
    svgz: VECTOR_GRAPHIC_FILL_COLOR,
    ep: VECTOR_GRAPHIC_FILL_COLOR,
    eps: VECTOR_GRAPHIC_FILL_COLOR,
    sketch: VECTOR_GRAPHIC_FILL_COLOR,
    mp3: AUDIO_ICON_FILL_COLOR,
    wav: AUDIO_ICON_FILL_COLOR,
    wma: AUDIO_ICON_FILL_COLOR,
    ogg: AUDIO_ICON_FILL_COLOR,
    flv: VIDEO_ICON_FILL_COLOR,
    h264: VIDEO_ICON_FILL_COLOR,
    mov: VIDEO_ICON_FILL_COLOR,
    mp4: VIDEO_ICON_FILL_COLOR,
    mwv: VIDEO_ICON_FILL_COLOR,
    zip: COMPRESSED_ICON_FILL_COLOR,
    '7z': COMPRESSED_ICON_FILL_COLOR,
    rar: COMPRESSED_ICON_FILL_COLOR,
    json: DATA_ICON_FILL_COLOR,
    yaml: DATA_ICON_FILL_COLOR,
    sql: DATA_ICON_FILL_COLOR,
    db: DATA_ICON_FILL_COLOR,
    dbf: DATA_ICON_FILL_COLOR,
};

// Copy of file icon background colors from lime-elements.
// Source: lime-elements/src/components/file/icon-background-colors.ts
//
// Stencil doesn't support exporting utility functions from a component
// library, so we duplicate them here until a proper shared solution exists.
const DEFAULT_ICON_BACKGROUND_COLOR = 'rgba(var(--color-gray-lighter), 0.4)';
const CALENDAR_ICON_BACKGROUND_COLOR = 'rgba(var(--color-cyan-lighter), 0.4)';
const EMAIL_ICON_BACKGROUND_COLOR = 'rgba(var(--color-gray-lighter), 0.4)';
const HTML_ICON_BACKGROUND_COLOR = 'rgba(var(--color-blue-lighter), 0.4)';
const TEXT_ICON_BACKGROUND_COLOR = 'rgba(var(--color-yellow-lighter), 0.4)';
const EXCEL_ICON_BACKGROUND_COLOR = 'rgba(var(--color-green-lighter), 0.4)';
const POWERPOINT_ICON_BACKGROUND_COLOR = 'rgba(var(--color-coral-lighter), 0.4)';
const WORD_ICON_BACKGROUND_COLOR = 'rgba(var(--color-sky-lighter), 0.4)';
const IMAGE_ICON_BACKGROUND_COLOR = 'rgba(var(--color-lime-lighter), 0.4)';
const VECTOR_GRAPHIC_ICON_BACKGROUND_COLOR = 'rgba(var(--color-magenta-lighter), 0.4)';
const PRESENTATION_BACKGROUND_COLOR = 'rgba(var(--color-blue-lighter), 0.4)';
const DOCUMENT_ICON_BACKGROUND_COLOR = 'rgba(var(--color-orange-lighter), 0.4)';
const SPREADSHEET_ICON_BACKGROUND_COLOR = 'rgba(var(--color-green-lighter), 0.4)';
const AUDIO_ICON_BACKGROUND_COLOR = 'rgba(var(--color-indigo-lighter), 0.4)';
const VIDEO_ICON_BACKGROUND_COLOR = 'rgba(var(--color-red-lighter), 0.4)';
const COMPRESSED_ICON_BACKGROUND_COLOR = 'rgba(var(--color-orange-lighter), 0.4)';
const MESSAGE_ICON_BACKGROUND_COLOR = 'rgba(var(--color-yellow-lighter), 0.4)';
const PDF_ICON_BACKGROUND_COLOR = 'rgba(var(--color-red-lighter), 0.4)';
const DATA_ICON_BACKGROUND_COLOR = 'rgba(var(--color-glaucous-lighter), 0.4)';
const DEFAULT_ICON_BACKGROUND = DEFAULT_ICON_BACKGROUND_COLOR;
const filetypeBackgroundColorTable = {
    msg: MESSAGE_ICON_BACKGROUND_COLOR,
    ics: CALENDAR_ICON_BACKGROUND_COLOR,
    ical: CALENDAR_ICON_BACKGROUND_COLOR,
    icalendar: CALENDAR_ICON_BACKGROUND_COLOR,
    ifb: CALENDAR_ICON_BACKGROUND_COLOR,
    email: EMAIL_ICON_BACKGROUND_COLOR,
    eml: EMAIL_ICON_BACKGROUND_COLOR,
    oft: EMAIL_ICON_BACKGROUND_COLOR,
    ost: EMAIL_ICON_BACKGROUND_COLOR,
    emlx: EMAIL_ICON_BACKGROUND_COLOR,
    html: HTML_ICON_BACKGROUND_COLOR,
    xml: HTML_ICON_BACKGROUND_COLOR,
    txt: TEXT_ICON_BACKGROUND_COLOR,
    rtf: TEXT_ICON_BACKGROUND_COLOR,
    dot: WORD_ICON_BACKGROUND_COLOR,
    doc: WORD_ICON_BACKGROUND_COLOR,
    docx: WORD_ICON_BACKGROUND_COLOR,
    dotx: WORD_ICON_BACKGROUND_COLOR,
    docm: WORD_ICON_BACKGROUND_COLOR,
    dotm: WORD_ICON_BACKGROUND_COLOR,
    odt: DOCUMENT_ICON_BACKGROUND_COLOR,
    pages: DOCUMENT_ICON_BACKGROUND_COLOR,
    pdf: PDF_ICON_BACKGROUND_COLOR,
    ppt: POWERPOINT_ICON_BACKGROUND_COLOR,
    pot: POWERPOINT_ICON_BACKGROUND_COLOR,
    pps: POWERPOINT_ICON_BACKGROUND_COLOR,
    pptx: POWERPOINT_ICON_BACKGROUND_COLOR,
    pptm: POWERPOINT_ICON_BACKGROUND_COLOR,
    potx: POWERPOINT_ICON_BACKGROUND_COLOR,
    potm: POWERPOINT_ICON_BACKGROUND_COLOR,
    ppam: POWERPOINT_ICON_BACKGROUND_COLOR,
    ppsx: POWERPOINT_ICON_BACKGROUND_COLOR,
    ppsm: POWERPOINT_ICON_BACKGROUND_COLOR,
    sldx: POWERPOINT_ICON_BACKGROUND_COLOR,
    sldm: POWERPOINT_ICON_BACKGROUND_COLOR,
    odp: PRESENTATION_BACKGROUND_COLOR,
    key: PRESENTATION_BACKGROUND_COLOR,
    xls: EXCEL_ICON_BACKGROUND_COLOR,
    xlsx: EXCEL_ICON_BACKGROUND_COLOR,
    csv: DEFAULT_ICON_BACKGROUND_COLOR,
    numbers: SPREADSHEET_ICON_BACKGROUND_COLOR,
    bmp: IMAGE_ICON_BACKGROUND_COLOR,
    jpg: IMAGE_ICON_BACKGROUND_COLOR,
    jpeg: IMAGE_ICON_BACKGROUND_COLOR,
    heic: IMAGE_ICON_BACKGROUND_COLOR,
    png: IMAGE_ICON_BACKGROUND_COLOR,
    gif: IMAGE_ICON_BACKGROUND_COLOR,
    psd: PRESENTATION_BACKGROUND_COLOR,
    ai: DOCUMENT_ICON_BACKGROUND_COLOR,
    svg: VECTOR_GRAPHIC_ICON_BACKGROUND_COLOR,
    svgz: VECTOR_GRAPHIC_ICON_BACKGROUND_COLOR,
    ep: VECTOR_GRAPHIC_ICON_BACKGROUND_COLOR,
    eps: VECTOR_GRAPHIC_ICON_BACKGROUND_COLOR,
    sketch: VECTOR_GRAPHIC_ICON_BACKGROUND_COLOR,
    mp3: AUDIO_ICON_BACKGROUND_COLOR,
    wav: AUDIO_ICON_BACKGROUND_COLOR,
    wma: AUDIO_ICON_BACKGROUND_COLOR,
    ogg: AUDIO_ICON_BACKGROUND_COLOR,
    flv: VIDEO_ICON_BACKGROUND_COLOR,
    h264: VIDEO_ICON_BACKGROUND_COLOR,
    mov: VIDEO_ICON_BACKGROUND_COLOR,
    mp4: VIDEO_ICON_BACKGROUND_COLOR,
    mwv: VIDEO_ICON_BACKGROUND_COLOR,
    zip: COMPRESSED_ICON_BACKGROUND_COLOR,
    '7z': COMPRESSED_ICON_BACKGROUND_COLOR,
    rar: COMPRESSED_ICON_BACKGROUND_COLOR,
    json: DATA_ICON_BACKGROUND_COLOR,
    yaml: DATA_ICON_BACKGROUND_COLOR,
    sql: DATA_ICON_BACKGROUND_COLOR,
    db: DATA_ICON_BACKGROUND_COLOR,
    dbf: DATA_ICON_BACKGROUND_COLOR,
};

/**
 * Returns an icon with name, fill color, and background color
 * based on the file extension of the given filename.
 *
 * @param filename - the filename to get the icon for
 */
function getFileIcon(filename) {
    const extension = fileExtension.getFileExtension(filename);
    return {
        name: filetypeIconTable[extension] || DEFAULT_FILE_ICON,
        color: filetypeFillColorTable[extension] || DEFAULT_ICON_FILL,
        backgroundColor: filetypeBackgroundColorTable[extension] || DEFAULT_ICON_BACKGROUND,
    };
}

const documentChipsCss = () => `:host(limebb-document-chips){box-sizing:border-box;display:flex;flex-wrap:wrap;gap:0.25rem;width:100%}*{box-sizing:border-box;min-width:0}limebb-summary-popover{max-width:100%}limel-chip{max-width:18rem}`;

const DocumentChips = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
        this.removeFile = index.createEvent(this, "removeFile");
        /**
         * The list of files to display as document chips.
         */
        this.files = [];
        this.blobUrls = new Map();
        this.handleRemove = (event) => {
            event.stopPropagation();
            const fileId = event.detail;
            this.revokeBlobUrl(fileId);
            this.removeFile.emit(fileId);
        };
    }
    onFilesChanged(newFiles, oldFiles) {
        const currentIds = new Set(newFiles.map((file) => file.id));
        for (const file of oldFiles) {
            if (!currentIds.has(file.id)) {
                this.revokeBlobUrl(file.id);
            }
        }
    }
    disconnectedCallback() {
        this.revokeAllBlobUrls();
    }
    render() {
        return (index.h(index.Host, { key: 'db1a1db2daeb513826e3fb8e03bc0a1fb223b7f6', role: "list", "aria-label": this.accessibleLabel }, this.files.map((file) => this.renderFile(file))));
    }
    renderFile(file) {
        const isReady = !file.uploadState || file.uploadState === 'done';
        const icon = this.getIcon(file);
        const chip = (index.h("limel-chip", { role: isReady ? undefined : 'listitem', slot: isReady ? 'trigger' : undefined, removable: true, identifier: file.id, text: file.filename, icon: icon, invalid: file.uploadState === 'failed', progress: file.uploadState === 'uploading'
                ? file.uploadProgress
                : undefined, loading: file.uploadState === 'added' ||
                file.uploadState === 'finalizing', onRemove: this.handleRemove }));
        if (!isReady) {
            return chip;
        }
        return (index.h("limebb-summary-popover", { role: "listitem", file: Object.assign(Object.assign({}, file), { href: this.getPreviewUrl(file) }), popoverMaxWidth: "32rem", popoverMaxHeight: "32rem", triggerDelay: 1000 }, chip));
    }
    getIcon(file) {
        if (file.icon) {
            return file.icon;
        }
        return getFileIcon(file.filename);
    }
    getPreviewUrl(file) {
        const extension = fileExtension.getFileExtension(file.filename);
        const previewType = extensionMapping.getPreviewType(extension);
        if (previewType === 'sharepoint') {
            return undefined;
        }
        if (file.href) {
            return file.href;
        }
        if (file.fileContent) {
            if (!this.blobUrls.has(file.id)) {
                this.blobUrls.set(file.id, URL.createObjectURL(file.fileContent));
            }
            return this.blobUrls.get(file.id);
        }
    }
    revokeBlobUrl(fileId) {
        const url = this.blobUrls.get(fileId);
        if (url) {
            URL.revokeObjectURL(url);
            this.blobUrls.delete(fileId);
        }
    }
    revokeAllBlobUrls() {
        for (const url of this.blobUrls.values())
            URL.revokeObjectURL(url);
        this.blobUrls.clear();
    }
    static get watchers() { return {
        "files": [{
                "onFilesChanged": 0
            }]
    }; }
};
DocumentChips.style = documentChipsCss();

exports.limebb_document_chips = DocumentChips;
