<script lang="ts">
  import { assets } from '$app/paths';
  import { timefmt } from '../../../helpers.js';
  import type { Comment } from '../../../helpers.ts';

  // export let author = '';
  // export let id = '';
  export let disc: { closed?: number; n: number } | undefined = undefined;
  // export let timestamp: number;
  // export let value = '';
  // export let value_html = '';
  export let owner: string;
  export let repo: string;
  export let edit: boolean = false;
  export let login: string;
  export let token: string;
  export let uniq: number;

  export let comment: Comment = {
    author: login,
    id: '',
    timestamp: 0,
    content: '',
    content_html: ''
  };
</script>

<div class="py-3 flex" id={comment.id}>
  <div class="px-3 w-20">
    <a href="/{comment.author}">
      <img
        class="profile-picture-small"
        src="/identicon/{comment.author}/small"
        alt={comment.author} />
    </a>
  </div>
  <div class="w-full flex">
    <div class="border rounded border-neutral-500 w-full">
      <div class="flex flex-col px-3 pb-3">
        <div class="py-3 flex items-center">
          <span class="icon-[tdesign--chat-bubble] w-4 h-4"></span>
          <a class="mx-2 author" href="/{comment.author}">{comment.author}</a>
          {timefmt(comment.timestamp * 1000)}
          {#if comment.id && comment.author == login}
            <div class="ms-auto">
              <button
                class="btn btn-sm btn-primary my-0"
                form="edit_comment"
                name="edit_comment"
                value={comment.id}
                on:click={() => (edit = true)}>Edit</button>
              <noscript>
                <form method="GET" action="#{comment.id}" id="edit_comment"></form>
              </noscript>
            </div>
          {/if}
        </div>
        {#if edit}
          {#if disc}
            <form
              method="POST"
              action="/api/discussion/{owner}/{repo}/{disc.n}"
              enctype="application/x-www-form-urlencoded">
              <input type="hidden" name="uniq" value={uniq} />
              <input type="hidden" name="token" value={token} />
              {#if comment.id.length}
                <input type="hidden" name="edit_comment" value={comment.id} />
              {/if}
              <textarea
                class="textarea w-full"
                name="new_discussion_comment"
                rows="8"
                placeholder=""
                value={comment.content}></textarea>
              <div class="py-1">
                <button class="btn btn-secondary btn-sm my-1">
                  {#if comment.id.length}Update{:else}Comment{/if}
                </button>
                {#if !comment.id.length}
                  {#if disc.closed}
                    <button class="btn btn-secondary btn-sm m-1" name="action" value="reopen"
                      >Comment and reopen
                    </button>
                  {:else}
                    <button class="btn btn-secondary btn-sm m-1" name="action" value="close"
                      >Comment and close</button>
                  {/if}
                {/if}
              </div>
            </form>
          {:else}
            <textarea
              class="textarea w-full"
              name="new_discussion_comment"
              rows="8"
              placeholder=""
              value={comment.content}></textarea>
          {/if}
        {:else}
          {@html comment.content_html}
        {/if}
      </div>
    </div>
  </div>
</div>

<style>
  .profile-picture-small {
    width: 4em;
    background-color: white;
    border-radius: 50%;
  }
</style>