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

export class ThreeColumnLayout {
    private main: HTMLElement;
    private container: HTMLElement;
    private column1: HTMLElement;
    private column2: HTMLElement;
    private column3: HTMLElement;
    private topBar: TopBar;

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

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

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

        this.column1 = createElement('div');
        this.column1.classList.add('column'); // Bootstrap column classes
        this.column2 = createElement('div');
        this.column2.classList.add('column');
        this.column3 = createElement('div');
        this.column3.classList.add('column');

        this.container.appendChild(this.column1);
        this.container.appendChild(this.column2);
        this.container.appendChild(this.column3);

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

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

    setColumn2Content(content: HTMLElement): void {
        this.column2.innerHTML = '';
        this.column2.appendChild(content);
    }

    setColumn3Content(content: HTMLElement): void {
        this.column3.innerHTML = '';
        this.column3.appendChild(content);
    }


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