// ==========================================
// Notes Surface — SidebarTags Component
// ==========================================
// Collapsible tag cloud for the notes sidebar.
// v0.37.11

const html = window.html;

const CHEVRON_SVG = html`
    <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor"
         stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
        <polyline points="9 18 15 12 9 6"/>
    </svg>`;

/**
 * @param {{
 *   tags: Array<[string, number]>,
 *   activeTag: string,
 *   collapsed: boolean,
 *   onToggle: () => void,
 *   onSelect: (tag: string) => void,
 * }} props
 */
export function SidebarTags({ tags, activeTag, collapsed, onToggle, onSelect }) {
    return html`
        <div class="sw-notes-surface__section">
            <button class="sw-notes-surface__section-header"
                    onClick=${onToggle}
                    aria-expanded=${!collapsed}>
                <span class=${'sw-notes-surface__chevron' + (collapsed ? '' : ' sw-notes-surface__chevron--open')}>
                    ${CHEVRON_SVG}
                </span>
                <span class="sw-notes-surface__section-label">Tags</span>
                ${tags.length > 0 && html`
                    <span class="sw-notes-surface__section-count">${tags.length}</span>`}
            </button>
            ${!collapsed && html`
                <div class="sw-notes-surface__section-body">
                    <div class="sw-notes-surface__tag-cloud">
                        ${tags.length === 0 && html`
                            <div class="sw-notes-surface__empty">No tags</div>`}
                        ${tags.map(([tag, count]) => html`
                            <span key=${tag}
                                  class=${'sw-notes-surface__tag-chip' + (activeTag === tag ? ' sw-notes-surface__tag-chip--active' : '')}
                                  onClick=${() => onSelect(activeTag === tag ? '' : tag)}
                                  title=${tag + ' (' + count + ')'}>
                                ${tag}
                            </span>`)}
                    </div>
                </div>`}
        </div>`;
}
