import {html, render} from './lit.min.js';
import * as tfrpc from '/static/tfrpc.js';

function delete_user(user) {
	if (confirm(`Are you sure you want to delete the user "${user}"?`)) {
		tfrpc.rpc.delete_user(user).then(function() {
			alert(`User "${user}" deleted successfully.`);
		}).catch(function(error) {
			alert(`Failed to delete user "${user}": ${JSON.stringify(error, null, 2)}.`);
		});
	}
}

function global_settings_set(key, value) {
	tfrpc.rpc.global_settings_set(key, value).then(function() {
		alert(`Set "${key}" to "${value}".`);
	}).catch(function(error) {
		alert(`Failed to set "${key}": ${JSON.stringify(error, null, 2)}.`);
	});
}

window.addEventListener('load', function() {
	const permission_template = (permission) =>
		html` <code>${permission}</code>`;
	function input_template(key, description) {
		if (description.type === 'boolean') {
			return html`
				<div style="margin-top: 1em">
					<label for=${'gs_' + key} style="font-weight: bold">${key}: </label>
					<div>
						<input type="checkbox" ?checked=${description.value} id=${'gs_' + key}></input>
						<button @click=${(e) => global_settings_set(key, e.srcElement.previousElementSibling.checked)}>Set</button>
						<div>${description.description}</div>
					</div>
				</div>
			`;
		} else if (description.type === 'textarea') {
			return html`
				<div style="margin-top: 1em"">
					<label for=${'gs_' + key} style="font-weight: bold">${key}: </label>
					<div style="width: 100%; padding: 0; margin: 0">
						<div style="width: 90%; padding: 0 margin: 0">
							<textarea style="vertical-align: top; width: 100%" rows=20 cols=80 id=${'gs_' + key}>${description.value}</textarea>
						</div>
						<button @click=${(e) => global_settings_set(key, e.srcElement.previousElementSibling.firstElementChild.value)}>Set</button>
						<div>${description.description}</div>
					</div>
				</div>
			`;
		} else {
			return html`
				<div style="margin-top: 1em">
					<label for=${'gs_' + key} style="font-weight: bold">${key}: </label>
					<div>
						<input type="text" value="${description.value}" id=${'gs_' + key}></input>
						<button @click=${(e) => global_settings_set(key, e.srcElement.previousElementSibling.value)}>Set</button>
						<div>${description.description}</div>
					</div>
				</div>
			`;
		}
	}
	const user_template = (user, permissions) => html`
		<li>
			<button @click=${(e) => delete_user(user)}>
				Delete
			</button>
			${user}:
			${permissions.map(x => permission_template(x))}
		</li>
	`;
	const users_template = (users) =>
		html`<h2>Users</h2>
		<ul>
			${Object.entries(users).map(u => user_template(u[0], u[1]))}
		</ul>`;
	const page_template = (data) =>
		html`<div style="padding: 0; margin: 0; width: 100%; max-width: 100%">
			<h2>Global Settings</h2>
			<div>
			${Object.keys(data.settings).sort().map(x => html`${input_template(x, data.settings[x])}`)}
			</div>
			${users_template(data.users)}
		</div>
		`;
	render(page_template(g_data), document.body);
});