<script lang="ts">
  import { Changes } from "../../Logic/Osm/Changes"
  import type { SpecialVisualizationState } from "../SpecialVisualization"

  export let state: { changes: Changes } & SpecialVisualizationState
  let pending = state.changes.pendingChanges
  let backend = state.osmConnection.Backend()
  let debug = state.featureSwitches.featureSwitchIsDebugging
</script>
{#if $pending?.length > 0}
  <div class="p-4">

    <h3>Pending changes</h3>

    There are currently {$pending.length} pending changes:

    <table class="gap-x-2">
      <tr>
        <th>
          Theme
        </th>
        <th>
          Type
        </th>
        <th>
          Object
        </th>
      </tr>
      {#each $pending as change}
        <tr>
          <td>{change.meta.theme}</td>
          <td>{change.meta.changeType}</td>
          <td>
            <a href={`${backend}/${change.type}/${change.id}`} target="_blank">
              {change.type}/{change.id}
            </a>
          </td>

        </tr>
      {/each}
    </table>

    {#if $debug}
      {#each $pending as change}
        {JSON.stringify(change)}
      {/each}
    {/if}
  </div>

{/if}


<style>
  td {
      padding-left: 2rem;
      padding-right: 2rem;
  }
</style>
