import { FlatTemplatable, tempstream } from "tempstream";
import { makeSlug } from "../utils/utils.js";

export function toggleModal(options: {
	name: string;
	contentWrapped: (id: string) => FlatTemplatable | Promise<FlatTemplatable>;
	contentUnwrapped: (
		id: string
	) => FlatTemplatable | Promise<FlatTemplatable>;
}) {
	const { contentWrapped, contentUnwrapped, name } = options;
	const id = makeSlug(name);
	return tempstream /* HTML */ `<style>
			.toggle-modal__wrapped {
				display: none;
			}

			@media (max-width: 960px) {
				.toggle-modal__wrapped {
					display: block;
				}
				.toggle-modal__unwrapped {
					display: none;
				}

				#${id} {
					display: none;
				}

				#${id}:checked ~ .toggle-modal__wrapped {
					display: none;
				}

				#${id}:checked ~ .toggle-modal__unwrapped {
					display: block;
					position: fixed;
					height: 100vh;
					width: 100vw;
					top: 0;
					left: 0;
					background-color: white;
					z-index: 99;
					overflow-y: scroll;
				}
			}
		</style>
		<div class="toggle-modal toggle-modal--${id}">
			<input id="${id}" name="${id}" type="checkbox" autocomplete="off" />
			<div class="toggle-modal__wrapped">${contentWrapped(id)}</div>
			<div class="toggle-modal__unwrapped">${contentUnwrapped(id)}</div>
		</div>`;
}