<script lang="ts">
  import { colors, fg, hex } from './colors';

  export let owner: string;
  export let repo: string;
  export let n: null | number = null;
  export let tagColor: number = colors[0];
  export let name = '';
  export let token: string;
  export let id: string | null = null;

  let nn = n == null ? '' : n;
</script>

<noscript>
  <style>
    .noscriptshow {
      display: block !important;
    }
    .noscriptnoshow {
      display: none !important;
    }
  </style>
</noscript>
<form method="POST" action="/api/admin/{owner}/{repo}/tag">
  <input type="hidden" name="token" value={token} />
  {#if id}
    <input type="hidden" name="id" value={id} />
  {/if}
  <div class="flex flex-col py-3">
    <div>
      <input
        class="input input-sm my-1"
        type="text"
        name="tag_name"
        bind:value={name}
        placeholder="Tag"
        required />
    </div>

    <div class="collapse">
      <input type="checkbox" />
      <div class="collapse-title px-0">
        <button
          class="btn btn-sm scr color noscriptnoshow"
          style:background-color={hex(tagColor)}
          style:border-color={hex(tagColor)}
          style:color={hex(fg(tagColor))}
          type="button"
          data-bs-toggle="collapse"
          data-bs-target="#color{nn}"
          aria-expanded="false"
          aria-controls="color{nn}"
          id="colorButton{nn}"
          aria-label="tag color"></button>
      </div>
      <div class="collapse-content">
        {#each colors as color}
          <input
            type="radio"
            name="colorp"
            bind:group={tagColor}
            value={color}
            checked={tagColor == color}
            class="r"
            style="--color: {hex(color)}" />
        {/each}
      </div>
    </div>

    <div class="noscriptshow" id="color{nn}">
      <div class="flex gap-2 items-center">
        {#if n == null}
          <button class="btn btn-sm btn-secondary my-1">Add tag</button>
        {:else}
          <button class="btn btn-sm btn-secondary my-1" name="action" value="edit-tag{n}"
            >Ok</button>
          <button class="btn btn-sm btn-error my-1" name="action" value="delete-tag{n}"
            >Delete</button>
        {/if}
      </div>
      <div class="collapse-content p-3"></div>
    </div>
  </div>
</form>

<style>
  form {
    display: inline;
  }

  input[type='radio'].r {
    appearance: none;
    border: none;
    display: inline-block;
    width: 25px;
    height: 25px;
    border-radius: 50%;
  }

  @media (prefers-color-scheme: dark) {
    input[type='radio'].r:checked {
      border: 1px solid white;
      margin: -1px 1px 1px -1px;
    }
  }

  @media (prefers-color-scheme: light) {
    input[type='radio'].r:checked {
      border: 1px solid black;
      margin: -1px 1px 1px -1px;
    }
  }

  input[type='radio'].r::before {
    content: '';
    display: block;
    width: 19px;
    height: 19px;
    border-radius: 50%;
    background-color: var(--color);
    position: relative;
    left: 2px;
    top: 2px;
  }

  input[type='radio'].r:not(:checked):hover {
    transform: scale(1.2);
  }

  button.color::after {
    content: ' ';
    padding-left: 10px;
  }
</style>