<script lang="ts">
  import type { TodoDetailPage } from './+page';
  import type { TodoItem } from '$lib/api/types';
  import { markdownToHtml } from '$lib/utils/markdown';
  import Textarea from '$lib/components/input/Textarea.svelte';

  export let data: TodoDetailPage;

  let todo: TodoItem = data.todo;
  let editingEnabled = true;

  function adjustTextareaRows(event: InputEvent) {
    const textarea = event.target as HTMLTextAreaElement;
    const scrollHeight = textarea.scrollHeight;

    const computedStyle = getComputedStyle(textarea);
    const lineHeight = parseFloat(computedStyle.lineHeight);
    const paddingTop = parseFloat(computedStyle.paddingTop);
    const paddingBottom = parseFloat(computedStyle.paddingBottom);

    const contentHeight = scrollHeight - paddingTop - paddingBottom;
    const rows = Math.ceil(contentHeight / lineHeight);

    textarea.rows = rows
  }


  async function handleFormSubmit() {

  }
</script>

<div class="flex flex-col w-full h-full p-4 sm:p-8 gap-4 max-w-7xl">
  <form action="" method="post" on:submit={handleFormSubmit}>
    <fieldset>
      <div class="field-pair">
        <Textarea id="title" value={todo.title}/>
        <label for="title">Title</label>
      </div>
    </fieldset>
    <div class="text-display">
      {@html markdownToHtml(data.todo.description)}
    </div>
  </form>
</div>

<style>
  h1 {
    @apply font-semibold;
    @apply w-full;
  }
  span.title-heading {
    @apply text-xl text-secondary font-bold;
  }

  .text-display {
    @apply text-start;
    @apply border-2 border-secondary rounded-md;
    @apply w-full p-4;
  }

  div.field-pair {
    @apply flex flex-col gap-0.5;
  }

  input {
    @apply w-full;
  }
  input:disabled {
    @apply bg-background border-none;
  }

  .field-pair label {
    @apply border-t;
  }

</style>
