import { LayoutSection, LayoutSectionType } from "@win2win/shared";
import { Reactive, watch } from "vue";

export function useSectionTypeChange(model?: Reactive<LayoutSection>) {
    const getContent = (type: LayoutSectionType) => ({
        [LayoutSectionType.TEXT]: { lines: [] },
        [LayoutSectionType.TABLE]: { columns: [] },
        [LayoutSectionType.CARDS_GRID]: { cards: [] },
        [LayoutSectionType.IMAGE]: { src: '', alt: '', width: '', height: '', align: 'left' },
        [LayoutSectionType.RADIO_BUTTONS]: { options: [{ label: '', value: ''}] }
    }[type])

    watch(
        () => model?.type,
        (value) => {
            if (!model || !value) return;
            const content = getContent(value)
            model.content = content
        }
    );

    return { getContent }
}