// layouts/SplitColumnLayout.ts
import { createElement } from '../utils/utils';
import { TopBar } from '../components/TopBar';

export class SplitColumnLayout {
    private main: HTMLElement;
    private container: HTMLElement;
    private sidebar: HTMLElement;
    private contentArea: HTMLElement;
    private topBar: TopBar;
    private isSidebarCollapsed: boolean = false;

    constructor() {
        this.main = createElement('div');

        this.container = createElement('div');
        this.container.classList.add('split-column-layout', 'container-fluid');

        this.topBar = new TopBar();
        this.main.appendChild(this.topBar.render());

        this.sidebar = createElement('div');
        this.sidebar.classList.add('sidebar'); // Bootstrap column classes for sidebar
        this.contentArea = createElement('div');
        this.contentArea.classList.add('content'); // Bootstrap column classes for content

        this.container.appendChild(this.sidebar);
        this.container.appendChild(this.contentArea);

        this.main.appendChild(this.container);
    }

    setSidebarContent(content: HTMLElement): void {
        this.sidebar.innerHTML = ''; // Clear existing content
        this.sidebar.appendChild(content);
    }

    setContentAreaContent(content: HTMLElement): void {
        this.contentArea.innerHTML = '';
        this.contentArea.appendChild(content);
    }

    render(): HTMLElement {
        return this.main;
    }

    toggleSidebar(): void {
        this.isSidebarCollapsed = !this.isSidebarCollapsed;
        if (this.isSidebarCollapsed) {
            this.container.classList.add('collapsed-sidebar');
        } else {
            this.container.classList.remove('collapsed-sidebar');
        }
    }
}