import { JSX } from 'solid-js';

import { Line } from './types';

const validTransportModes = ["bus", "tram", "metro", "rer", "transilien", "funicular", "ter", "unknown"];

export const TransportModeWeights: Record<string, number> = {
	bus: 1,
	tram: 2,
	val: 3,
	funicular: 4,
	metro: 5,
	rer: 6,
	transilien: 7,
	ter: 8,
};

export function getTransportModeSrc(mode: string, color: boolean = true): string | undefined {
	let ret = undefined;
	if (validTransportModes.includes(mode)) {
		ret = `/public/symbole_${mode}_${color ? "" : "support_fonce_"}RVB.svg`;
	}
	return ret;
}

export function renderLineTransportMode(line: Line): JSX.Element {
	return <img src={getTransportModeSrc(line.transportMode)} />
}

function renderBusLinePicto(line: Line, styles: CSSModuleClasses): JSX.Element {
	return (
		<div class={styles.busLinePicto}>
			<svg viewBox="0 0 31.5 14">
				<rect x="0" y="0" width="31.5" height="14" rx="1.5" ry="1.5" style={{ fill: `#${line.backColorHexa}` }} />
				<text x="50%"
					y="55%"
					dominant-baseline="middle"
					text-anchor="middle"
					font-size="7.4"
					style={{ fill: `#${line.foreColorHexa}` }}>
					{line.shortName}
				</text>
			</svg>
		</div>
	);
}

function renderTramLinePicto(line: Line, styles: CSSModuleClasses): JSX.Element {
	const lineStyle = { fill: `#${line.backColorHexa}` };
	return (
		<div class={styles.tramLinePicto}>
			<svg viewBox="0 0 20 20">
				<rect x="0" y="0" width="20" height="3" rx="1" ry="1" style={lineStyle} />
				<rect x="0" y="17" width="20" height="3" rx="1" ry="1" style={lineStyle} />
				<text x="50%"
					y="55%"
					dominant-baseline="middle"
					text-anchor="middle"
					font-size="11"
					style={{ fill: "#00000" }}>
					{line.shortName}
				</text>
			</svg>
		</div>
	);
}

function renderMetroLinePicto(line: Line, styles: CSSModuleClasses): JSX.Element {
	return (
		<div class={styles.metroLinePicto}>
			<svg viewBox="0 0 20 20">
				<circle cx="10" cy="10" r="10" style={{ fill: `#${line.backColorHexa}` }} />
				<text x="50%"
					y="55%"
					dominant-baseline="middle"
					text-anchor="middle"
					font-size="11" style={{ fill: `#${line.foreColorHexa}` }}>
					{line.shortName}
				</text>
			</svg>
		</div>
	);
}

function renderTrainLinePicto(line: Line, styles: CSSModuleClasses): JSX.Element {
	return (
		<div class={styles.trainLinePicto}>
			<svg viewBox="0 0 20 20">
				<rect x="0" y="0" width="20" height="20" rx="4.5" ry="4.5" style={{ fill: `#${line.backColorHexa}` }} />
				<text x="50%"
					y="55%"
					dominant-baseline="middle"
					text-anchor="middle"
					font-size="11"
					style={{ fill: `#${line.foreColorHexa}` }}>
					{line.shortName}
				</text>
			</svg>
		</div>
	);
}

export function renderLinePicto(line: Line, styles: CSSModuleClasses): JSX.Element {
	switch (line.transportMode) {
		case "bus":
		case "funicular":
			return renderBusLinePicto(line, styles);
		case "tram":
			return renderTramLinePicto(line, styles);
		/* case "val": */
		case "metro":
			return renderMetroLinePicto(line, styles);
		case "transilien":
		case "rer":
		case "ter":
			return renderTrainLinePicto(line, styles);
	}
}