<script lang="ts">
  import { goto } from '$app/navigation';
  import { page } from '$app/state';

  export let owner: string;
  export let repo: string;
  export let channel: string;
  export let channels: string[];
  export let can_delete: boolean = false;
  export let token: string;
  export let tab: string;

  function change(e: Event) {
    e.preventDefault();
    let ch = e.target as HTMLFormElement;
    console.log('value', ch.value);
    if (ch.value == 'main') {
      goto(`/${owner}/${repo}/${tab}`);
    } else {
      goto(`/${owner}/${repo}:${ch.value}/${tab}`);
    }
  }
</script>

<div class="flex" role="toolbar">
  <div class="input-group my-2">
    <form method="GET" action="/{owner}/{repo}">
      {#if channels.length}
        <select
          id="channel"
          class="select select-sm w-auto"
          name="channel"
          on:change={change}
          bind:value={channel}>
          {#each channels as c}
            {#if c == channel}
              <option value={c} selected={true}>{c}</option>
            {:else}
              <option value={c}>{c}</option>
            {/if}
          {/each}
        </select>
      {/if}
      <noscript>
        <button class="btn btn-outline-secondary btn-sm">Change</button>
      </noscript>
    </form>
  </div>
  <form method="POST" enctype="application/x-www-form-urlencoded">
    <input type="hidden" name="redirect" value={page.url.pathname} />
    <input type="hidden" name="token" value={token} />
    <div class="input-group px-2 my-2 tooltip">
      <input
        class="input input-sm w-auto"
        type="text"
        name="name"
        placeholder="Channel name"
        autocomplete="off"
        required />
    </div>
    <div class="join me-2 my-2" role="group" aria-label="First group">
      {#if can_delete}
        <button
          class="btn btn-error btn-sm"
          formaction="/api/channel/{owner}/{repo}:{channel}/prune"
          title="Delete channel">
          Delete
        </button>
      {/if}
      <button class="btn btn-sm" formaction="/api/channel/{owner}/{repo}:{channel}/fork">
        Fork
      </button>
      <button
        class="btn btn-sm"
        formaction="/api/channel/{owner}/{repo}:{channel}/rename"
        title="Rename channel">
        Rename
      </button>
    </div>
  </form>
</div>

<style>
  form {
    display: inherit;
  }
</style>