import { createResource, onMount } from "solid-js";
import List from "../../modules/list";
import RemotesService from "../../services/remotes-service";

function RemotesList(props) {
  const [remotes, { refetch: refetchRemotes }] = createResource(
    RemotesService.getRemotes
  );

  onMount(() => {
    refetchRemotes();
  });

  function handleNewRemote() {}

  return (
    <>
      <div class="d-flex flex-row">
        <div class="d-flex flex-row flex-fill">
          {props.navigation ? props.navigation : null}
        </div>
        <div class="d-flex flex-row justify-content-end flex-fill">
          <button class="btn btn-dark me-2 mb-3" onClick={handleNewRemote}>
            <i class="bi bi-plus-square me-2"></i>
            New Remote
          </button>
        </div>
      </div>
      <List
        class={"flex-fill"}
        columns={[
          {
            id: "id",
            name: "id",
            width: 6,
          },
          {
            id: "title",
            name: "Title",
          },
          {
            id: "options",
            name: "",
            width: 4,
          },
        ]}
        onListItemClick={() => {}}
        items={(remotes() || []).map((remote) => ({
          id: {
            html: <span class="font-monospace">{remote.getId()}</span>,
          },
          name: {
            text: remote.getTitle(),
          },
          options: {
            html: (
              <>
                <button
                  class="btn btn-outline-secondary me-2"
                  onClick={(event) => {
                    event.stopPropagation();
                    handleDeleteRemote(remote);
                  }}
                >
                  <i class="bi bi-trash-fill"></i>
                </button>
              </>
            ),
          },
          remote,
        }))}
      ></List>
    </>
  );
}

export default RemotesList;