import { FlatTemplatable, tempstream } from "tempstream";

function name_to_id(str: string) {
	return str.replace(/\W/g, "-");
}

const style = (hide_tabs_width: number) =>
	/* HTML */ `<style>
		.tab-label {
			height: 45px;
			line-height: 45px;
			padding: 0 45px;
			display: block;
			float: left;
			box-sizing: border-box;
			border-bottom: 3px solid transparent;
			cursor: pointer;
			font-size: 18px;
			-webkit-user-select: none;
			user-select: none;
		}

		@media screen and (max-width: ${hide_tabs_width}px) {
			.tab-label {
				display: none;
			}
		}

		.tab-label--mobile {
			line-height: unset;
			padding-top: 30px;
			padding-left: 0;
			pointer-events: none;
			padding-bottom: 30px;
			color: $font-graphite;
			border-bottom: 2px solid $font-primary;
			display: none;
			@media screen and (max-width: ${hide_tabs_width}px) {
				display: block;
			}
		}

		.tab-content {
			padding-top: 30px;
			clear: both;
		}

		@media screen and (max-width: ${hide_tabs_width}px) {
			.tab-content {
				display: block !important;
			}
		}
	</style>`;

export function tabs(
	tabs: Record<string, FlatTemplatable>,
	selected_tab_style = "font-weight: bold;",
	selected_index = 0,
	hide_tabs_width = 0
): FlatTemplatable {
	return /* HTML */ tempstream`${style(hide_tabs_width)}
	${Object.keys(tabs)
		.map((tab_title, index) => {
			const id = name_to_id(tab_title);
			return /* HTML */ `<input
					type="radio"
					name="tabs"
					id="${id}"
					class="tab-radio--${id}"
					style="display: none"
					${selected_index == index ? "checked" : ""}
				/>
				<label class="tab-label tab-label--${id}" for="${id}">
					${tab_title}
				</label>`;
		})
		.join("\n")}
	${Object.entries(tabs).map(([title, content]) => {
		const id = name_to_id(title);
		return /* HTML */ tempstream`<div class="tab-label tab-label--mobile">
					${title}
				</div>
				<div class="tab-content tab-content--${id}">${content}</div>
				<style>
					.tab-radio--${id} ~ .tab-content--${id} {
						display:none;
					}
					.tab-radio--${id}:checked ~ .tab-content--${id} {
						display:block;
					}
					.tab-radio--${id}:checked ~ label.tab-label--${id} {
						${selected_tab_style}
					}
				</style>`;
	})}`;
}