// #region Imports
import { html } from '../../../../Dom/Html';
import { repeat, when } from '../../../Directives/Directives';
import { FONT_CATEGORIES } from './Types/IFont';
// #endregion
// #region Constants
/**
 * The alphabet letters for filtering.
 *
 * @internal
 */
const ALPHABET = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('');
// #endregion
/**
 * The template for the FontEditorElement.
 *
 * @param element - The element instance.
 * @returns The template result.
 * @public
 */
export function fontEditorElementTemplate(element) {
    return html `
        <div part="root">
            <!-- Preview Section -->
            ${when(element.showPreview, () => html `
                <div part="preview">
                    <div part="preview-text"
                         style="font-family: ${element.selectedFont?.family ?? 'inherit'};">
                        ${element.previewText}
                    </div>
                </div>
            `)}

            <!-- Search Input -->
            ${when(element.showSearch, () => html `
                <mosaik-textbox part="search"
                                placeholder="Search fonts..."
                                .value="${element.searchText}"
                                @input="${(e) => element.filterBySearch(e.target.value)}">
                </mosaik-textbox>
            `)}

            <!-- Filters Section -->
            ${when(element.showCategoryFilter || element.showAlphabetFilter, () => html `
                <div part="filters">
                    <!-- Category Filter -->
                    ${when(element.showCategoryFilter, () => html `
                        <div part="categories">
                            <mosaik-chip label="All"
                                         .appearance="${element.selectedCategory === null ? 'solid' : 'soft'}"
                                         .variant="${element.selectedCategory === null ? 'primary' : 'secondary'}"
                                         @click="${() => element.filterByCategory(null)}"></mosaik-chip>
                            ${repeat(FONT_CATEGORIES, (category) => category, (category) => html `
                                <mosaik-chip .label="${category}"
                                             .appearance="${element.selectedCategory === category ? 'solid' : 'soft'}"
                                             .variant="${element.selectedCategory === category ? 'primary' : 'secondary'}"
                                             @click="${() => element.filterByCategory(category)}"></mosaik-chip>
                            `)}
                        </div>
                    `)}

                    <!-- Alphabet Filter -->
                    ${when(element.showAlphabetFilter, () => html `
                        <div part="alphabet">
                            <mosaik-button part="alphabet-button"
                                           .appearance="${element.selectedLetter === null ? 'solid' : 'soft'}"
                                           .variant="${element.selectedLetter === null ? 'primary' : 'secondary'}"
                                           .size="${'small'}"
                                           .label="${'*'}"
                                           @click="${() => element.filterByLetter(null)}"
                                           title="Show all"></mosaik-button>
                            ${repeat(ALPHABET, (letter) => letter, (letter) => html `
                                <mosaik-button part="alphabet-button"
                                               .appearance="${element.selectedLetter === letter ? 'solid' : 'soft'}"
                                               .variant="${element.selectedLetter === letter ? 'primary' : 'secondary'}"
                                               .size="${'small'}"
                                               .label="${letter}"
                                               ?disabled="${!element.availableLetters.includes(letter)}"
                                               @click="${() => element.filterByLetter(letter)}"
                                               title="Show fonts starting with ${letter}"></mosaik-button>
                            `)}
                        </div>
                    `)}
                </div>
            `)}

            <!-- Font List -->
            <div part="list-container">
                ${when(element.loading, () => html `
                    <div part="loading">
                        <mosaik-spinner></mosaik-spinner>
                    </div>
                `)}
                ${when(!element.loading && element.fonts.length === 0, () => html `
                    <div part="empty">No fonts found</div>
                `)}
                ${when(!element.loading && element.fonts.length > 0, () => html `
                    ${repeat(element.fonts, (font) => font.id, (font) => html `
                        <div part="font-item"
                             data-selected="${element.selectedFont?.id === font.id}"
                             @click="${() => element.selectFont(font)}">
                            <div>
                                <div part="font-name" style="font-family: '${font.family}';">
                                    ${font.family}
                                </div>
                                <div part="font-category">${font.category} · ${font.source}</div>
                            </div>
                        </div>
                    `)}
                `)}
            </div>
        </div>
    `;
}
//# sourceMappingURL=FontEditorElementTemplate.js.map