<script lang="ts">
  import { Folder, GitBranch, Plus, X } from "@lucide/svelte";

  interface RepositoryTabItem {
    path: string;
    name: string;
    branch: string | null;
  }

  export let activeView: "management" | "repository" = "management";
  export let repoTabs: RepositoryTabItem[] = [];
  export let isBusy: boolean = false;
  export let language: "en" | "de" = "en";
  export let onOpenManagement: () => void = () => {};
  export let isActive: (path: string) => boolean = () => false;
  export let onSelect: (path: string) => void | Promise<void> = () => {};
  export let onClose: (path: string, event: MouseEvent) => void | Promise<void> = () => {};
  export let onContextMenu: (path: string, event: MouseEvent) => void = () => {};
  export let onAdd: () => void | Promise<void> = () => {};
</script>

<header class="repo-tabbar" aria-label={language === "de" ? "Repository-Reiter" : "Repository tabs"}>
  <button
    class="repo-tab management"
    class:active={activeView === "management"}
    type="button"
    onclick={onOpenManagement}
    disabled={isBusy}
    title={language === "de" ? "Repository-Verwaltung" : "Repository Management"}
  >
    <Folder size={15} aria-hidden="true" />
  </button>

  <div class="repo-tabs-scroll">
    {#each repoTabs as repo (repo.path)}
      <div
        class="repo-tab-wrap"
        class:active={isActive(repo.path)}
        role="presentation"
        oncontextmenu={(event) => onContextMenu(repo.path, event)}
      >
        <button
          class="repo-tab"
          type="button"
          onclick={() => onSelect(repo.path)}
          disabled={isBusy}
          title={repo.path}
        >
          <GitBranch size={13} aria-hidden="true" />
          <span>{repo.name}</span>
        </button>
        <button
          class="repo-tab-close"
          type="button"
          onclick={(event) => onClose(repo.path, event)}
          disabled={isBusy}
          aria-label={language === "de" ? `${repo.name} schließen` : `Close ${repo.name}`}
          title={language === "de" ? "Repository-Tab schließen" : "Close repository tab"}
        >
          <X size={11} aria-hidden="true" />
        </button>
      </div>
    {/each}
  </div>

  <button
    class="repo-tab-add"
    type="button"
    onclick={onAdd}
    disabled={isBusy}
    title={language === "de" ? "Repository-Ordner öffnen" : "Open repository folder"}
    aria-label={language === "de" ? "Repository-Ordner öffnen" : "Open repository folder"}
  >
    <Plus size={15} aria-hidden="true" />
  </button>
</header>
