frontend-svelte/src/features/SetupFont/lib/controlManager/controlManager.svelte.ts

import {
    type ControlModel,
    type TypographyControl,
    createTypographyControl,
} from '$shared/lib';
import { SvelteMap } from 'svelte/reactivity';

export interface Control {
    id: string;
    increaseLabel?: string;
    decreaseLabel?: string;
    controlLabel?: string;
    instance: TypographyControl;
}

export class TypographyControlManager {
    #controls = new SvelteMap<string, Control>();
    #sizeMultiplier = $state(1);

    constructor(configs: ControlModel[]) {
        configs.forEach(({ id, increaseLabel, decreaseLabel, controlLabel, ...config }) => {
            this.#controls.set(id, {
                id,
                increaseLabel,
                decreaseLabel,
                controlLabel,
                instance: createTypographyControl(config),
            });
        });
    }

    get controls() {
        return this.#controls.values();
    }

    get weight() {
        return this.#controls.get('font_weight')?.instance.value ?? 400;
    }

    get size() {
        const size = this.#controls.get('font_size')?.instance.value;
        return size === undefined ? undefined : size * this.#sizeMultiplier;
    }

    get height() {
        return this.#controls.get('line_height')?.instance.value;
    }

    get spacing() {
        return this.#controls.get('letter_spacing')?.instance.value;
    }

    set multiplier(value: number) {
        this.#sizeMultiplier = value;
    }
}

/**
 * Creates a typography control manager that handles a collection of typography controls.
 *
 * @param configs - Array of control configurations.
 * @returns - Typography control manager instance.
 */
export function createTypographyControlManager(configs: ControlModel[]) {
    return new TypographyControlManager(configs);
}