import { LoginMessage, LoginResponse, MessageType } from './message';

let isLoggingIn = false;

const renderUI = () => {
  document
    .querySelectorAll('.worlds-container:first-of-type .world-select')
    .forEach((el) => {
      const cloned = el.cloneNode(true);
      if (!(cloned instanceof HTMLAnchorElement)) {
        return;
      }

      cloned.addEventListener('click', handleClick);

      const span = cloned.childNodes.item(1);
      if (!span) {
        return;
      }
      span.textContent += ' (SS)';

      el.parentNode?.insertBefore(cloned, el.nextSibling);
    });
};

const handleClick = async (e: MouseEvent) => {
  if (!(e.currentTarget instanceof HTMLAnchorElement)) {
    return;
  }

  e.preventDefault();

  if (isLoggingIn) {
    return;
  }

  isLoggingIn = true;

  const url = new URL(e.currentTarget.href);
  const server = extractServerFromURL(url);
  chrome.runtime
    .sendMessage({
      type: MessageType.LOGIN,
      server,
      loginUrl: url.toString(),
      url: url.protocol + '//' + url.host.replace('www', server),
    } as LoginMessage)
    .then((resp: LoginResponse) => {
      isLoggingIn = false;
      if (!resp?.error) {
        return;
      }
      console.error(resp.error);
    });
};

const extractServerFromURL = (url: URL): string => {
  const split = url.pathname.split('/');
  if (split.length <= 0) {
    throw new Error(`invalid path: ${url.pathname}`);
  }
  return split[split.length - 1];
};

const init = () => {
  renderUI();
};

init();