import { state } from '../store';
import { c } from '../util';
import { req } from '../websocket';
import { createSignal } from "solid-js";
export default function() {//take prop to be user_id or state.user
	let email;
	const [passphrase, setPassphrase] = createSignal('');
	const [pp_visible, set_pp_visible] = createSignal(false);
	return <>
		<form onsubmit={async e => {
			e.preventDefault();
			if(email.value !== state.user.email) {
				try {
					await req('update_profile', {email: email.value});
				} catch(err) {
					alert(err);
				}
			}
			email.value = '';
		}}>
			<label>
				new email
				<input required type="email" placeholder="me@domain.com" ref={email} />
			</label>
			<br />
			<button>set email</button>
		</form>
		<form onsubmit={async e => {
			e.preventDefault();
			try {
				await req('update_profile', {passphrase: passphrase()});
			} catch(err) {
				alert(err);
			}
			setPassphrase('');
		}}>
			<label style="display: flex /*https://philipwalton.github.io/solved-by-flexbox/demos/input-add-ons/ this just makes the button height match and line up with the input field (2px woopdedoo)*/">
				new passphrase
				<input class="longplaceholder" type={pp_visible() ? "text" : "password"} placeholder="a long passphrase is both easier to remember and more secure than a password!" value={passphrase()} onInput={e => setPassphrase(e.target.value)} />
				<button type="button" onClick={() => set_pp_visible(!pp_visible())}>{pp_visible() ? '👀' : '🙈'}</button>
			</label>
			<button>set passphrase</button>
		</form>
		<a onClick={c} href="/user/reservation/">your reservations</a><br />
		<button type="button" onClick={() => req('unregister')}>delete account</button>
		<Show when={state.user.god}>
			<br />
			<a onClick={c} href="/user/">see all users</a>
			list all stores and checkbox for owner / worker - only one selectable
		</Show>
		todo: for each store that user is owner, table with other store owners and workers. can remove / switch between owner and worker / add (search by email? create a new user(send otp so new one makes their own pp)), link to manage products?
		constraint: store has at least one owner?
		for each store that user is worker, just list the store or link to reservations ?
	</>
}