import $ from 'jquery';
import * as JSX from './jsx';
import * as user from './user';
import * as settings from './settings';
import { Dropdown, DropdownItem, Spinner, addPopup } from './components';


async function logout() {
  await user.logout();
}

/**
  * NavItem component
  * takes in title and route, optionally "disabled"
**/
function NavItem( props: any ) {
  const url = new URL( window.location.href );
  var style = `height: 45px;`;
  var onclick = () => JSX.navigate( props.route );
  if( props.disabled || url.pathname == props.route ) {
    style += "color: #888;pointer-events: none;";
    onclick = null;
  }

  return <DropdownItem onclick={ onclick } style={ style }>
    <a>[ { props.title } ]</a>
  </DropdownItem>
}

function SettingsButton( props: any ) {
  let openSettings = settings.openPopup;
  let style = `height: 45px;`;

  if( props.disabled ) {
    openSettings = null;
    style += "color: #888; pointer-events: none;";
  }

  return <DropdownItem onclick={ openSettings } style={ style }>
    <a>[ Settings ]</a>
  </DropdownItem>
}

function EmailInput() {
  const sendLink = async () => {
    const email = $( "#login-email" ).val().toString();
    $( "#login-btn-wrapper" ).append( <Spinner /> );

    const res = await user.sendLoginLink( email );
    if( res === true ) {
      $( "#header-login-dropdown" ).replaceWith(
        <div style="padding: 5px">Success! Check your inbox for a login link.</div>
      );
    } else {
      $( "#header-login-dropdown" ).replaceWith(
        <div style="padding: 5px">Error sending email: { res }</div>
      );
    }
  };

  return <div id="header-dropdown">
    <div id="header-login-dropdown">
      Log in
      <input type="text" placeholder="email" id="login-email" style="margin-bottom: 5px" />
      <div id="login-btn-wrapper" style="display: flex; justify-content: space-between; margin-top: 5px;">
        <button onclick={ sendLink }>
          [ get code ]
        </button>
      </div>
    </div>
  </div>
}

function showLoginPopup() {
  addPopup( $( <EmailInput /> ) );
}

export function Header() {
  return <header id="header">
    <div id="header-user">
      { user.is_loggedin && <><b>User: </b><b id="username">{ user.settings.nickname }</b>&nbsp;</> }
      { user.is_loggedin && <button onclick={ logout }>[ Log out ]</button> }
      { !user.is_loggedin && <button onclick={ showLoginPopup }>[ Log in ]</button> }
    </div>
    <div id="header-ctrls">
      <a style="padding-right: 10px" onclick={ () => JSX.navigate( "/support" ) }>Site Map</a>
      <Dropdown title="≡" inline innerStyle="top: 24px; margin-left: 0" style="width: 48px" id="header-dropdown-btn">
        {
          user.is_loggedin ? <NavItem title="Terminal" route="/terminal" /> : <NavItem title="Terminal" route="/" disabled />
        }
        {
          user.is_loggedin ? <SettingsButton /> : <SettingsButton disabled />
        }
      <NavItem title="Home" route="/" />
      </Dropdown>
    </div>
  </header>
}