<script lang="ts">
  import { Check, LoaderCircle } from "@lucide/svelte";

  interface Props {
    commitMessage: string;
    canCommit: boolean;
    hasRepository: boolean;
    isBusy: boolean;
    operation: string;
    stagedCount: number;
    onCommit: () => void;
    onCommitMessageChange: (msg: string) => void;
  }

  let {
    commitMessage = "",
    canCommit = false,
    hasRepository = false,
    isBusy = false,
    operation = "",
    stagedCount = 0,
    onCommit = () => {},
    onCommitMessageChange = () => {},
  }: Props = $props();

  function handleSubmit(event: SubmitEvent) {
    event.preventDefault();
    onCommit();
  }
</script>

<section class="panel flex flex-col" aria-label="Commit">
  <div class="section-head">
    <div>
      <span class="eyebrow">Commit</span>
      <h2 class="mt-0.5 text-ink text-base font-bold leading-tight">Message</h2>
    </div>
    <span class="pill pill-count">{stagedCount} staged</span>
  </div>

  <form class="commit-form" onsubmit={handleSubmit}>
    <textarea
      value={commitMessage}
      oninput={(e) => onCommitMessageChange((e.target as HTMLTextAreaElement).value)}
      placeholder="Commit message..."
      disabled={!hasRepository || isBusy}
    ></textarea>
    <button class="btn-primary w-full flex-shrink-0" type="submit" disabled={!canCommit}>
      {#if operation === "Committing"}
        <LoaderCircle class="spin" size={16} aria-hidden="true" />
      {:else}
        <Check size={16} aria-hidden="true" />
      {/if}
      Commit
    </button>
  </form>
</section>
