import { renderColorPaletteCss, renderStaticCss, renderThemeCss } from './render-css';
import { createThemeBaseEidosConfig } from './themes/base';

const LIGHT_SELECTOR = ":root,\n[data-theme='base-light'],\n[data-theme='light']";
const DARK_SELECTOR = "[data-theme='base-dark'],\n[data-theme='dark']";

export function renderGeneratedBaseEidosCss(): string {
	const config = createThemeBaseEidosConfig();

	return [
		`/*
 * Generated Eidos foundation CSS.
 *
 * Source: src/uix/eidos/lib/themes/base.ts
 * Command: npm run generate:eidos-css
 *
 * Do not edit this file by hand.
 *
 * The color foundation emits only the donor scales the theme's roles
 * reference. The full 33-scale palette ships opt-in in palette.css —
 * import it only if you reference raw --scale-{name}-{step} tokens.
 */`,
		renderStaticCss(config),
		renderThemeCss(config, 'base-light', { selector: LIGHT_SELECTOR }),
		renderThemeCss(config, 'base-dark', { selector: DARK_SELECTOR })
	].join('\n\n');
}

/**
 * The full donor palette — all 33 raw `--scale-*` scales (light + dark).
 * Opt-in: `base.css` (the foundation) only ships the scales the theme's roles
 * use; this file restores the complete palette for apps/tools that reference
 * raw scale tokens directly (e.g. the color showcase). The framework itself
 * never imports it — components use `--color-{role}-*`.
 */
export function renderGeneratedPaletteCss(): string {
	const config = createThemeBaseEidosConfig();

	return [
		`/*
 * Generated Eidos full color palette (all 33 donor scales).
 *
 * Source: src/uix/eidos/lib/themes/base.ts
 * Command: npm run generate:eidos-css
 *
 * Do not edit this file by hand. Opt-in — import only if you reference raw
 * --scale-{name}-{step} tokens; the foundation ships role scales only.
 */`,
		renderColorPaletteCss(config, 'base-light', { selector: LIGHT_SELECTOR }),
		renderColorPaletteCss(config, 'base-dark', { selector: DARK_SELECTOR })
	].join('\n\n');
}