<script lang="ts">

  import { UIEventSource } from "../../Logic/UIEventSource"
  import { OsmConnection } from "../../Logic/Osm/OsmConnection"
  import LoginToggle from "../Base/LoginToggle.svelte"
  import { createEventDispatcher } from "svelte"
  import { XCircleIcon } from "@babeard/svelte-heroicons/solid"
  import AccordionSingle from "../Flowbite/AccordionSingle.svelte"
  import Dropdown from "../Base/Dropdown.svelte"

  export let osmConnection: OsmConnection
  export let inspectedContributors: UIEventSource<{
    name: string,
    visitedTime: string,
    label: string
  }[]>
  let dispatch = createEventDispatcher<{ selectUser: string }>()

  let labels = UIEventSource.asObject<string[]>(osmConnection.getPreference("previously-spied-labels"), [])
  let labelField = ""

  function remove(user: string) {
    inspectedContributors.set(inspectedContributors.data.filter(entry => entry.name !== user))
  }

  function addLabel() {
    if (labels.data.indexOf(labelField) >= 0) {
      return
    }
    labels.data.push(labelField)
    labels.ping()
    labelField = ""
  }

  function sort(key: string) {
    console.log("Sorting on", key)
    inspectedContributors.data.sort((a, b) => (a[key] ?? "").localeCompare(b[key] ?? ""))
    inspectedContributors.ping()
  }
</script>

<LoginToggle ignoreLoading state={{osmConnection}}>
  <table class="w-full">
    <tr>
      <td>
        <button class="as-link cursor-pointer" on:click={() => sort("name")}>
          Contributor
        </button>
      </td>
      <td>

        <button class="as-link cursor-pointer" on:click={() => sort("visitedTime")}>
          Visited time
        </button>
      </td>
      <td>
        <button class="as-link cursor-pointer" on:click={() => sort("label")}>Label</button>
      </td>
      <td>Remove</td>
    </tr>
    {#each $inspectedContributors as c}
      <tr>
        <td>
          <button class="as-link" on:click={() => dispatch("selectUser", c.name)}>{c.name}</button>
        </td>
        <td>
          {c.visitedTime}
        </td>
        <td>
          <select bind:value={c.label} on:change={() => inspectedContributors.ping()}>
            <option value={undefined}><i>No label</i></option>
            {#each $labels as l}
              <option value={l}>{l}</option>
            {/each}
          </select>
        </td>
        <td>
          <XCircleIcon class="w-6 h-6" on:click={() => remove(c.name)} />
        </td>
      </tr>
    {/each}
  </table>

  <AccordionSingle>

    <div slot="header">Labels</div>
    {#if $labels.length === 0}
      No labels
    {:else}
      {#each $labels as label}
        <div class="mx-2">{label}
          <button class:disabled={!$inspectedContributors.some(c => c.label === label)} on:click={() => {dispatch("selectUser",
        inspectedContributors.data.filter(c =>c.label === label).map(c => c .name).join(";")
        )}}>See all changes for these users
          </button>
        </div>
      {/each}
    {/if}
    <div class="interactive flex m-2 items-center gap-x-2 rounded-lg p-2">
      <div class="shrink-0">Create a new label</div>
      <input bind:value={labelField} type="text" />
      <button on:click={() => addLabel()} class:disabled={!(labelField?.length > 0) } class="disabled shrink-0">Add
        label
      </button>
    </div>
  </AccordionSingle>
</LoginToggle>
