import {
  createEffect,
  createSignal,
  Match,
  mergeProps,
  onCleanup,
  Switch,
} from "solid-js";

import UrlUtils from "../../tools/url-utils";
import CommandsList from "./commands-list-view";
import RemotesList from "./remotes-list-view";

function RemotesView(props) {
  props = mergeProps({ onIntegrationClicked: () => {} }, props);
  const REMOTES_LIST_VIEW = "remotes_list";
  const COMMANDS_LIST_VIEW = "commands_list";
  const VIEWS = [REMOTES_LIST_VIEW, COMMANDS_LIST_VIEW];

  const [currentView, setCurrentView] = createSignal(REMOTES_LIST_VIEW);

  createEffect(() => {
    let url = UrlUtils.getUrl();
    url = UrlUtils.addQueryParameter(url, "tab", currentView());
    UrlUtils.setUrl(url);
  });

  onCleanup(() => {
    window.removeEventListener("popstate", setViewFromUrl);
  });

  setViewFromUrl();
  window.addEventListener("popstate", setViewFromUrl);

  function setViewFromUrl() {
    let view = UrlUtils.getQueryParameter("tab");
    if (!view) return;
    if (!VIEWS.includes(view)) return;
    setCurrentView(view);
  }

  function Navigation(props) {
    return (
      <div class="d-flex flex-row flex-fill">
        <button
          class={
            "btn me-2 mb-3" +
            (currentView() === REMOTES_LIST_VIEW
              ? " btn-secondary"
              : " btn-dark")
          }
          onClick={() => setCurrentView(REMOTES_LIST_VIEW)}
        >
          <i class="bi bi-tv me-2"></i>
          Remotes
        </button>
        <button
          class={
            "btn me-2 mb-3" +
            (currentView() === COMMANDS_LIST_VIEW
              ? " btn-secondary"
              : " btn-dark")
          }
          onClick={() => setCurrentView(COMMANDS_LIST_VIEW)}
        >
          <i class="bi bi-gear me-2"></i>
          Commands
        </button>
      </div>
    );
  }

  return (
    <div
      class={
        "d-flex flex-column overflow-hidden flex-fill px-3 pb-2 pt-3 " +
        props.class
      }
    >
      <Switch>
        <Match when={currentView() === REMOTES_LIST_VIEW}>
          <RemotesList navigation={<Navigation />} />
        </Match>
        <Match when={currentView() === COMMANDS_LIST_VIEW}>
          <CommandsList navigation={<Navigation />} />
        </Match>
      </Switch>
    </div>
  );
}

export default RemotesView;