/**
 * The configuration options to control the render.
 * @typedef {Object} tConfiguration
 *
 * @property {tConfigurationOptions} options - Options that control how the map is rendered.
 * @property {tConfigurationTheme} theme - Options that control the look of the map.
 */

/**
 * Options that control how the map is rendered
 * @typedef {Object} tConfigurationOptions
 *
 * @property {boolean} showBackground - Whether to render the background patterns.
 * @property {boolean} smartLabelPositioning - Whether to activate smart label positioning.
 */

/**
 * Options that control how the map is rendered
 * @typedef {Object} tConfigurationTheme
 *
 * @property {tConfigurationThemeColors} colors - The colors of map elements.
 * @property {tConfigurationThemeSizes} sizes - The sizes of map elements.
 * @property {tConfigurationThemeFonts} fonts - The font family and sizes.
 * @property {tConfigurationThemeLineHeights} lineHeights - The line heights of map text.
 * @property {tConfigurationThemeOpacity} opacity - Opacity of map elements.
 */

/**
 * The colors of map elements
 * @typedef {Object} tConfigurationThemeColors
 *
 * @property {string} background - The color of the background.
 * @property {string} axis: - The color of the axis lines at the edge of the map.
 * @property {string} vertex - The color of component shapes.
 * @property {string} label - The color of component labels.
 * @property {string} stageForeground - The first color of the stage bitmap when the background is drawn.
 * @property {string} stageBackground - The second color of the stage bitmap when the background is drawn.
 * @property {string} inertia - The color of the inertia element.
 * @property {string} evolution - The color of the evolution arrow.
 * @property {Array<string>} groups - A list of colors to use for groups.
 */

/**
 * The sizes of map elements
 * @typedef {Object} tConfigurationThemeSizes
 *
 * @property {number} mapWidth - The width of the map.
 * @property {number} mapHeight - The height of the map.
 * @property {number} padding - The padding around the map for axis labels.
 * @property {number} lineWidth - The default line width.
 * @property {number} vertexWidth - Width of component shapes.
 * @property {number} vertexHeight - Height of component shapes.
 * @property {number} arrowheadSize - Size of arrowheads.
 * @property {number} stageHeight - Height of stage lines.
 */

/**
 * The sizes of map elements
 * @typedef {Object} tConfigurationThemeFonts
 *
 * @property {string} family - The font family to use, in CSS form.
 * @property {number} axisLabel - Font size of the axis labels.
 * @property {number} vertexLabel - Font size of vertex labels.
 * @property {number} note - Font size of note text.
 */

/**
 * The line heights of map text
 * @typedef {Object} tConfigurationThemeLineHeights
 *
 * @property {number} vertexLabel - Line height of vertex labels.
 * @property {number} note - Line height of note text.
 */

/**
 * The opacity of map elements.
 * @typedef {Object} tConfigurationThemeOpacity
 *
 * @property {number} groups - Opacity of the color in groups
 */

const internals = {
    kDefaults: {
        options: {
            showBackground: true,
            smartLabelPositioning: true,
        },
        theme: {
            colors: {
                background: "#FFFFFF",
                axis: "#0F261F",
                vertex: "#0F261F",
                label: "#0F261F",
                stageForeground: "#DAE6E3",
                stageBackground: "#FFFFFF",
                inertia: "#FA2B00",
                evolution: "#4F8FE6",
                groups: [
                    "#4F8FE6", // Olympic Blue
                    "#FA2B00", // Jasper Red
                    "#23C17C", // Light Porcelain Green
                    "#FAED8F", // Naples Yellow
                    "#FFB3F0", // Hermosa Pink
                ],
            },
            sizes: {
                mapWidth: 1300,
                mapHeight: 1000,
                padding: 42,
                lineWidth: 0.5,
                vertexWidth: 25,
                vertexHeight: 25,
                arrowheadSize: 10,
                stageHeight: 100,
            },
            fonts: {
                family: '"Helvetica Neue", Helvetica, Arial, sans-serif',
                axisLabel: 14,
                vertexLabel: 12,
                note: 12,
            },
            lineHeights: {
                vertexLabel: 18,
                note: 18,
            },
            opacity: {
                groups: 0.1,
            },
        },
    },
};

/**
 * Returns a configuration by extending the defaults with the user overrides.
 *
 * @param {tConfiguration} [overrides={}] - User overrides.
 * @returns {tConfiguration} The extended configuration.
 */
export function extendConfiguration(overrides = {}) {
    const configuration = {
        options: Object.assign(
            {},
            internals.kDefaults.options,
            overrides.options,
        ),
        theme: {
            colors: Object.assign(
                {},
                internals.kDefaults.theme.colors,
                overrides.theme?.colors,
            ),
            sizes: Object.assign(
                {},
                internals.kDefaults.theme.sizes,
                overrides.theme?.sizes,
            ),
            fonts: Object.assign(
                {},
                internals.kDefaults.theme.fonts,
                overrides.theme?.fonts,
            ),
            lineHeights: Object.assign(
                {},
                internals.kDefaults.theme.lineHeights,
                overrides.theme?.lineHeights,
            ),
            opacity: Object.assign(
                {},
                internals.kDefaults.theme.opacity,
                overrides.theme?.opacity,
            ),
        },
    };

    return configuration;
}