import { h, Fragment } from 'preact';
import { useState } from 'preact/hooks';
import cn from 'classnames';
import { useDispatch } from '../actions';
import { useUser } from '../user';
import css from './css';

css`
a.discussion {
  display: flex;

  padding: 0.25rem 0.5rem;
  text-size: 2rem;
  line-height: 2rem;
  text-decoration: none;

  border-radius: 0.3rem;

  color: var(--theme-note-fg);
  background: var(--theme-note-bg);
}

a.discussion .access {
  opacity: 0.5;
  margin-right: 0.75rem;
}

a.discussion .name {
  flex: 1 1 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

a.discussion > a {
  margin-left: 0.75rem;
  text-decoration: underline;
  color: inherit;
  opacity: 0.5;

  transition: opacity 0.3s;
}
a.discussion > a:hover {
  opacity: 1;
}
`;

const DiscussionLink = ({ id, name, url, attributedTo }) => {
	const { user } = useUser();
  const writable = user && attributedTo && attributedTo.indexOf(user.id) > -1;

  return (
    <a class="discussion" href={`?document=${id}`}>
      <span class="access">{writable ? 'W' : 'R'}</span>
      <span class="name">{name}</span>
      {url && (
        <a href={url.href}>ext</a>
      )}
    </a>
  );
};

css`
ul.discussions {
  list-style: none;
  padding: 0;

  width: 26rem;
}

ul.discussions > li {
  margin: 0.2rem 0;
}
`;

const DiscussionList = ({ discussions }) => {
	return (
		<ul class="discussions">
			{discussions.map((discussion) => (
  			<li>
  			  <DiscussionLink {...discussion} />
  			</li>
  		))}
		</ul>
	);
};

css`
div.menu div.user {
	display: flex;
	align-items: baseline;
	gap: 1em;
}
`;
const UserMenu = () => {
	const [showLogin, setLogin] = useState(false);
	const { user } = useUser();
	const dispatch = useDispatch();

	if (showLogin) {
		return (
		  <form class="user" onSubmit={(e) => {
			  e.preventDefault();

				const elem = e.target.elements;
				const username = elem.namedItem('username').value;
				const password = elem.namedItem('password').value;

				dispatch({ type: 'login', username, password })
					.then(
						() => setLogin(false),
						(err) => setLogin("error - wrong username/password?"),
					);

		  }}>
		  	{showLogin !== true ? <p>{showLogin}</p> : null}
		  	<div>
			  	<label>username</label>
			  	<input name="username" autocomplete="username" required />
			  </div>
		  	<div>
			  	<label>password</label>
			  	<input name="password" autocomplete="password" type="password" required />
			  </div>
			  <input type="submit" value="login" />
			  <button onClick={(e) => { e.preventDefault(); setLogin(false)}}>cancel</button>
		  </form>
	  );
	}

	return (
	  <div class="user">
	    {user && user.name !== 'Guest'
	      ? (
	        <>
	          <span>logged in as {user.name}</span>
	          <button onClick={() => dispatch({ type: 'logout' })}>log out</button>
	        </>
	      )
	      : (
	        <>
	          <span>not logged in</span>
	          <button onClick={() => setLogin(true)}>log in</button>
	        </>
	      )}
	  </div>
  );
};

css`
div.menu {
	margin: 1rem 2rem;
}
`;
export const Menu = () => {
	const { user, discussions } = useUser();

  if (user === null) {
    return (
      <div class="menu">
    	  <h2>Discussions</h2>
    	  loading...
  	  </div>
	  );
  }

  return (
    <div class="menu">
  	  <h2>Discussions</h2>
  	  <UserMenu />
      <DiscussionList discussions={discussions} />
    </div>
  );
};