// #region Imports
import { html } from '../../../../Dom/Html';
import { Icons } from '../../../../Resources/Icons';
import { repeat, when } from '../../../Directives/Directives';
// #endregion
/**
 * @internal
 */
export function colorEditorPaletteElementTemplate(e) {
    const activePalette = e.getActivePalette();
    const showSwitcher = e.palettes.length > 1;
    const isCustomPalette = activePalette?.title === 'Custom';
    return html `
        <div part="header">
            <span part="title">${activePalette?.title ?? 'Palette'}</span>
            ${when(showSwitcher, () => html `
                <button part="switcher"
                        @click="${() => e.handleSwitcherClick()}"
                        ?disabled="${e.disabled}"
                        aria-label="Change palette">
                    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                        <path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"/>
                    </svg>
                </button>
            `)}
        </div>

        <div part="colors">
            ${repeat(activePalette?.colors ?? [], (color) => color, (color) => html `
                <button part="color-item"
                        style="background-color: ${color}"
                        @click="${() => e.handleColorClick(color)}"
                        ?disabled="${e.disabled}"
                        aria-label="Select color ${color}"
                        tabindex="0"></button>
            `)}
            ${when(e.allowAdd && isCustomPalette, () => html `
                <button part="add-button"
                        @click="${() => e.handleAddClick()}"
                        ?disabled="${e.disabled}"
                        aria-label="Add current color to palette">
                    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                        <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/>
                    </svg>
                </button>
            `)}
        </div>

        <div part="panel" data-visible="${e.panelOpen}" style="${e.getPanelStyles()}">
            <div part="panel-header">
                <span part="panel-title">Select Palette</span>
                <button part="panel-close"
                        @click="${() => e.handlePanelClose()}"
                        aria-label="Close palette selector"
                        .icon="${Icons.close}">
                    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                        <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>
                    </svg>
                </button>
            </div>
            <div part="panel-list">
                ${repeat(e.palettes, (palette) => palette.title, (palette) => {
        const remainingCount = palette.colors.length - 8;
        return html `
                        <div part="panel-item"
                             @click="${() => e.handlePaletteSelect(palette.title)}"
                             tabindex="0"
                             role="option"
                             aria-selected="${palette.title === e.selectedPalette}">
                            <span part="panel-item-name">${palette.title}</span>
                            <div part="panel-item-colors">
                                ${repeat(palette.colors.slice(0, 8), (color) => color, (color) => html `
                                    <span part="panel-item-color"
                                          style="background-color: ${color}"></span>
                                `)}
                                ${when(remainingCount > 0, () => html `
                                    <span part="panel-item-more">+${remainingCount}</span>
                                `)}
                            </div>
                        </div>
                    `;
    })}
            </div>
        </div>
    `;
}
//# sourceMappingURL=ColorEditorPaletteElementTemplate.js.map