import { Injectable, signal } from '@angular/core';

export type LayoutId = 'sidebar' | 'topnav' | 'compact' | 'wide';

const STORAGE_KEY = 'dailymeals.layout';
const VALID: LayoutId[] = ['sidebar', 'topnav', 'compact', 'wide'];

@Injectable({ providedIn: 'root' })
export class LayoutService {
  readonly layout = signal<LayoutId>(this.load());

  setLayout(id: LayoutId): void {
    this.layout.set(id);
    localStorage.setItem(STORAGE_KEY, id);
    document.documentElement.dataset['layout'] = id;
  }

  private load(): LayoutId {
    const stored = localStorage.getItem(STORAGE_KEY);
    const id = VALID.includes(stored as LayoutId) ? (stored as LayoutId) : 'sidebar';
    document.documentElement.dataset['layout'] = id;
    return id;
  }
}
