
import { strip_svg } from './svg';

export function post_process_pikchr_svg(svg: string, size?: string) {
	svg = strip_svg(svg);

	// text
	for (const [ color, regex ] of Object.entries(text_regex)) {
		svg = svg.replace(regex, `<text fill="${text_css_vars[color]}"`);
	}

	// shape fill
	for (const [ color, regex ] of Object.entries(shape_fill_regex)) {
		svg = svg.replace(regex, `<path style="fill:${fill_css_vars[color]}`);
	}

	// arrow heads
	for (const [ color, regex ] of Object.entries(arrow_head_regex)) {
		svg = svg.replace(regex, `fill:${line_css_vars[color]}`);
	}

	// lines / boxes
	for (const [ color, regex ] of Object.entries(line_regex)) {
		svg = svg.replace(regex, `stroke:${line_css_vars[color]}`);
	}

	return svg;
}



type CSSVarColor
	= 'black'
	| 'red'
	| 'orange'
	| 'yellow'
	| 'green'
	| 'teal'
	| 'pink'
	| 'purple'
	| 'blue'
	| 'indigo'
	| 'magenta'
	| 'brown'
	;

const text_regex: Record<CSSVarColor, RegExp> = {
	black: /\b<text fill="rgb\(0,0,0\)"/gi,
	red:   /\b<text fill="rgb\(255,0,0\)"/gi,
	orange: /\b<text fill="rgb\(255,165,0\)"/gi,
	yellow: /\b<text fill="rgb\(255,255,0\)"/gi,
	green: /\b<text fill="rgb\(0,128,0\)"/gi,
	teal: /\b<text fill="rgb\(0,128,128\)"/gi,
	pink: /\b<text fill="rgb\(255,192,203\)"/gi,
	purple: /\b<text fill="rgb\(128,0,128\)"/gi,
	blue: /\b<text fill="rgb\(0,0,255\)"/gi,
	indigo: /\b<text fill="rgb\(75,0,130\)"/gi,
	magenta: /\b<text fill="rgb\(255,0,255\)"/gi,
	brown: /\b<text fill="rgb\(165,42,42\)"/gi,
};

const line_regex: Record<CSSVarColor, RegExp> = {
	black: /stroke:rgb\(0,0,0\)/gi,
	red:   /stroke:rgb\(255,0,0\)/gi,
	orange: /stroke:rgb\(255,165,0\)/gi,
	yellow: /stroke:rgb\(255,255,0\)/gi,
	green: /stroke:rgb\(0,128,0\)/gi,
	teal: /stroke:rgb\(0,128,128\)/gi,
	pink: /stroke:rgb\(255,192,203\)/gi,
	purple: /stroke:rgb\(128,0,128\)/gi,
	blue: /stroke:rgb\(0,0,255\)/gi,
	indigo: /stroke:rgb\(75,0,130\)/gi,
	magenta: /stroke:rgb\(255,0,255\)/gi,
	brown: /stroke:rgb\(165,42,42\)/gi,
};

const shape_fill_regex = {
	black: /\b<path style="fill:rgb\(0,0,0\)/gi,
	red:   /\b<path style="fill:rgb\(255,0,0\)/gi,
	orange: /\b<path style="fill:rgb\(255,165,0\)/gi,
	yellow: /\b<path style="fill:rgb\(255,255,0\)/gi,
	green: /\b<path style="fill:rgb\(0,128,0\)/gi,
	teal: /\b<path style="fill:rgb\(0,128,128\)/gi,
	pink: /\b<path style="fill:rgb\(255,192,203\)/gi,
	purple: /\b<path style="fill:rgb\(128,0,128\)/gi,
	blue: /\b<path style="fill:rgb\(0,0,255\)/gi,
	indigo: /\b<path style="fill:rgb\(75,0,130\)/gi,
	magenta: /\b<path style="fill:rgb\(255,0,255\)/gi,
	brown: /\b<path style="fill:rgb\(165,42,42\)/gi,
}

const arrow_head_regex: Record<CSSVarColor, RegExp> = {
	black: /fill:rgb\(0,0,0\)/gi,
	red:   /fill:rgb\(255,0,0\)/gi,
	orange: /fill:rgb:\(255,165,0\)/gi,
	yellow: /fill:rgb:\(255,255,0\)/gi,
	green: /fill:rgb:\(0,128,0\)/gi,
	teal: /fill:rgb:\(0,128,128\)/gi,
	pink: /fill:rgb:\(255,192,203\)/gi,
	purple: /fill:rgb:\(128,0,128\)/gi,
	blue: /fill:rgb:\(0,0,255\)/gi,
	indigo: /fill:rgb:\(75,0,130\)/gi,
	magenta: /fill:rgb:\(255,0,255\)/gi,
	brown: /fill:rgb:\(165,42,42\)/gi,
};

const line_css_vars: Record<CSSVarColor, string> = {
	black: 'var(--theme-line, currentcolor)',
	red: 'var(--theme-chart-shape-red-line, currentcolor)',
	orange: 'var(--theme-chart-shape-orange-line, currentcolor)',
	yellow: 'var(--theme-chart-shape-yellow-line, currentcolor)',
	green: 'var(--theme-chart-shape-green-line, currentcolor)',
	teal: 'var(--theme-chart-shape-teal-line, currentcolor)',
	pink: 'var(--theme-chart-shape-pink-line, currentcolor)',
	purple: 'var(--theme-chart-shape-purple-line, currentcolor)',
	blue: 'var(--theme-chart-shape-blue-line, currentcolor)',
	indigo: 'var(--theme-chart-shape-indigo-line, currentcolor)',
	magenta: 'var(--theme-chart-shape-magenta-line, currentcolor)',
	brown: 'var(--theme-chart-shape-brown-line, currentcolor)',
};

const text_css_vars: Record<CSSVarColor, string> = {
	black: 'var(--theme-text-body, currentcolor)',
	red: 'var(--theme-chart-shape-red-line, currentcolor)',
	orange: 'var(--theme-chart-shape-orange-line, currentcolor)',
	yellow: 'var(--theme-chart-shape-yellow-line, currentcolor)',
	green: 'var(--theme-chart-shape-green-line, currentcolor)',
	teal: 'var(--theme-chart-shape-teal-line, currentcolor)',
	pink: 'var(--theme-chart-shape-pink-line, currentcolor)',
	purple: 'var(--theme-chart-shape-purple-line, currentcolor)',
	blue: 'var(--theme-chart-shape-blue-line, currentcolor)',
	indigo: 'var(--theme-chart-shape-indigo-line, currentcolor)',
	magenta: 'var(--theme-chart-shape-magenta-line, currentcolor)',
	brown: 'var(--theme-chart-shape-brown-line, currentcolor)',
};

const fill_css_vars: Record<CSSVarColor, string> = {
	black: 'var(--theme-chart-shape-black-fill, transparent)',
	red: 'var(--theme-chart-shape-red-fill, transparent)',
	orange: 'var(--theme-chart-shape-orange-fill, transparent)',
	yellow: 'var(--theme-chart-shape-yellow-fill, transparent)',
	green: 'var(--theme-chart-shape-green-fill, transparent)',
	teal: 'var(--theme-chart-shape-teal-fill, transparent)',
	pink: 'var(--theme-chart-shape-pink-fill, transparent)',
	purple: 'var(--theme-chart-shape-purple-fill, transparent)',
	blue: 'var(--theme-chart-shape-blue-fill, transparent)',
	indigo: 'var(--theme-chart-shape-indigo-fill, transparent)',
	magenta: 'var(--theme-chart-shape-magenta-fill, transparent)',
	brown: 'var(--theme-chart-shape-brown-fill, transparent)',
};
