const loadJSONP = (url) => {
    return new Promise((resolve, reject) => {
        const script = document.createElement('script');
        script.src = url;
        script.addEventListener('load', () => resolve());
        script.addEventListener('error', () => reject(new Error(`Error loading script from ${url}`)));
        document.body.appendChild(script);
    });
};

function capitalize(string) {
    return string.charAt(0).toUpperCase() + string.slice(1);
}

let App = {
    config: {
        data_legends_path: "./data/legends.json",
        data_loadout_path: "./data/loadouts.json",
        base_legends: [],
        base_loadouts: [],
    },
    run: async () => {
        console.log("ApexLottery is being loaded");

        try {
            await Promise.all([
                loadJSONP(App.config.data_legends_path).then(() => {
                    App.config.base_legends = legends;
                    console.log("Loaded legends", App.config.base_legends);
                }),
                loadJSONP(App.config.data_loadout_path).then(() => {
                    App.config.base_loadouts = loadouts;
                    console.log("Loaded loadouts", App.config.base_loadouts);
                })
            ]);
        } catch (error) {
            console.error("Error loading JSONP:", error);
            return;
        }

        // Create containers for each legend category
        const categories = Array.from(new Set(App.config.base_legends.map(legend => legend.type)));
        categories.forEach(category => {
            const categoryContainer = document.createElement('div');
            categoryContainer.className = 'category-container';
            categoryContainer.id = category.toLowerCase(); // Using the lowercase type as the container ID

            document.body.appendChild(categoryContainer);
        });

        // Append legend items to the appropriate category container
        App.config.base_legends.forEach(legend => {
            const categoryContainer = document.getElementById(legend.type.toLowerCase());
            if (categoryContainer) {
                const legendElement = document.createElement('div');
                legendElement.className = 'legend-item';

                const legendImage = document.createElement('img');
                legendImage.src = legend.image; // Assuming each legend object has an 'image' property
                legendElement.appendChild(legendImage);

                const legendName = document.createElement('p');
                legendName.textContent = legend.name;
                legendElement.appendChild(legendName);

                categoryContainer.appendChild(legendElement);
            }
        });
    }
}


window.addEventListener('load', App.run)