www / src / components / OptionsSection.ts

import { html } from "../html";

const themes = {
	light: ["latte"],
	dark: ["frappe", "macchiato", "mocha"],
};

const allThemes = [...themes.dark, ...themes.light];
const defaultTheme = "mocha";

function getCurrentTheme(): string {
	const stored = localStorage.getItem("theme");
	if (stored && allThemes.includes(stored)) return stored;
	return defaultTheme;
}

function getCurrentBoxyMode(): boolean {
	const stored = localStorage.getItem("boxyMode");
	return stored === "true";
}

function applyBoxyMode(isEnabled: boolean) {
	if (isEnabled) document.documentElement.classList.add("boxy");
	else document.documentElement.classList.remove("boxy");

	localStorage.setItem("boxyMode", isEnabled.toString());
}

function applyTheme(theme: string) {
	for (const t of allThemes) document.body.classList.remove(`theme-${t}`);
	document.body.classList.add(`theme-${theme}`);
	localStorage.setItem("theme", theme);
}

type DropdownOptionItem = {
	value: string;
	label: string;
	selected?: boolean;
};
type DropdownOption =
	| {
			type: "optgroup";
			name: string;
			children: DropdownOptionItem[];
	  }
	| DropdownOptionItem;
type DropdownOptions = {
	options: DropdownOption[];
	selectedValue?: string;
	onChange: (value: string) => void;
	label?: string;
};

function Dropdown({
	options,
	selectedValue,
	onChange,
	label = "select an option",
}: DropdownOptions) {
	const id = `${Math.random().toString(36).substring(2, 15)}`;

	(window as Window)[`handleDropdownChange_${id}`] = (event: Event) => {
		const select = event.target as HTMLSelectElement;
		onChange(select.value);
	};

	const renderOption = (option: DropdownOptionItem) => {
		const isSelected = selectedValue === option.value;
		const _ = html`
    		<option
            value=${option.value}
            selected=${isSelected ? "" : undefined}
        >
            ${option.label}
        </option>
			`;
		return _;
	};

	const renderDropdownOption = (option: DropdownOption) => {
		if ("type" in option && option.type === "optgroup") {
			return html`
					<optgroup label="${option.name}">
						${option.children.map(renderOption)}
					</optgroup>
				`;
		} else {
			return renderOption(option as DropdownOptionItem);
		}
	};

	return html`
    	<div class="dropdown input-container">
    		<label for="${id}" class="dropdown__label">${label}</label>
    		<select
    			id="${id}"
    			class="dropdown__select"
    			onchange="window.handleDropdownChange_${id}(event)"
    		>
    			${options.map(renderDropdownOption)}
    		</select>
    	</div>
    `;
}

type CheckboxOptions = {
	label: string;
	checked: boolean;
	onChange: (checked: boolean) => void;
};
function Checkbox({ label, checked, onChange }: CheckboxOptions) {
	const id = `${Math.random().toString(36).substring(2, 15)}`;

	(window as Window)[`handleCheckboxChange_${id}`] = (event: Event) => {
		const checkbox = event.target as HTMLInputElement;
		onChange(checkbox.checked);
	};

	return html`
    <div class="input-container checkbox-container">
        <span class="checkbox-label" aria-hidden="true">${label}</span>
        <label class="sr-only" for="${id}">${label}</label>
        <input
            type="checkbox"
            id="${id}"
            class="checkbox"
            checked=${checked ? "checked" : ""}
            onchange="window.handleCheckboxChange_${id}(event)"
        />
    </div>
  `;
}

export const OptionsSection = () => {
	const currentTheme = getCurrentTheme();
	const isBoxyMode = getCurrentBoxyMode();

	applyTheme(currentTheme);
	applyBoxyMode(isBoxyMode);

	const dropdownOptions: DropdownOptions = {
		options: [
			{
				type: "optgroup",
				name: "light themes",
				children: themes.light.map((t) => ({
					value: t,
					label: t,
					selected: t === currentTheme,
				})),
			},
			{
				type: "optgroup",
				name: "dark themes",
				children: themes.dark.map((t) => ({
					value: t,
					label: t,
					selected: t === currentTheme,
				})),
			},
		],
		selectedValue: currentTheme,
		onChange: applyTheme,
		label: "theme",
	};
	const checkboxOptions: CheckboxOptions = {
		label: "boxy mode",
		checked: isBoxyMode,
		onChange: applyBoxyMode,
	};

	return html`
		<div class="theme-picker">
    		${Dropdown(dropdownOptions)}
        ${Checkbox(checkboxOptions)}
    </div>
	`;
};

document.addEventListener("DOMContentLoaded", () => {
	applyTheme(getCurrentTheme());
	applyBoxyMode(getCurrentBoxyMode());
});