import { createApp } from 'vue';
import ProjectPageRenderer from './projects-renderer/ProjectPageRenderer.vue';
import ProjectStructureEditor from './projects-renderer/ProjectStructureEditor.vue';
import { buildInitialProject } from './projects-renderer/schema/projectSchema';

const readPayload = (element) => {
    const targetId = element.dataset.payloadTarget;
    const payloadNode = targetId ? document.getElementById(targetId) : null;

    if (!payloadNode) {
        return {};
    }

    try {
        return JSON.parse(payloadNode.textContent || '{}');
    } catch (error) {
        console.error('Unable to parse project renderer payload.', error);
        return {};
    }
};

document.querySelectorAll('[data-project-structure-editor]').forEach((element) => {
    const payload = readPayload(element);
    createApp(ProjectStructureEditor, {
        initialProject: payload,
        fieldId: element.dataset.fieldId || 'project-structure-field',
        uploadUrl: element.dataset.uploadUrl || null,
        languages: payload.languages || [],
        defaultLanguage: payload.defaultLanguage || '',
        categories: payload.categories || [],
        activeValue: payload.active ?? 'Y',
    }).mount(element);
});

document.querySelectorAll('[data-project-page-renderer]').forEach((element) => {
    const payload = readPayload(element);
    createApp(ProjectPageRenderer, {
        project: buildInitialProject(payload),
        activeLang: payload.defaultLanguage || '',
    }).mount(element);
});