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

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 [currentView, setCurrentView] = createSignal(REMOTES_LIST_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;