// ==========================================
// Notes Surface — NotesWorkspace Component
// ==========================================
// Header bar (sidebar toggle) + NotesPane.
// NotesPane runs standalone=false — the surface manages filters.
//
// v0.37.11

import { NotesPane } from '../../components/notes-pane/index.js';
import { NotificationBell } from '../../shell/notification-bell.js';

const html = window.html;

const PANEL_SVG = html`
    <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor"
         stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <rect x="3" y="3" width="18" height="18" rx="2"/>
        <line x1="9" y1="3" x2="9" y2="21"/>
    </svg>`;

/**
 * @param {{
 *   sidebarOpen: boolean,
 *   onToggleSidebar: () => void,
 *   initialNoteId?: string,
 *   onNoteChange?: (note: object|null) => void,
 *   handleRef?: { current: any },
 * }} props
 */
export function NotesWorkspace({
    sidebarOpen, onToggleSidebar, initialNoteId, onNoteChange, handleRef,
}) {
    return html`
        <div class="sw-notes-surface__workspace">
            <div class="sw-notes-surface__workspace-header">
                <div class="sw-notes-surface__workspace-header-left">
                    ${!sidebarOpen && html`
                        <button class="sw-notes-surface__sidebar-toggle"
                                onClick=${onToggleSidebar}
                                title="Show sidebar"
                                aria-label="Show sidebar">
                            ${PANEL_SVG}
                        </button>`}
                </div>
                <div class="sw-notes-surface__workspace-header-right">
                    <${NotificationBell} />
                </div>
            </div>
            <${NotesPane}
                standalone=${false}
                initialNoteId=${initialNoteId}
                handleRef=${handleRef}
                onNoteChange=${onNoteChange}
                className="sw-notes-surface__notes-pane" />
        </div>`;
}
