<script lang="ts" context="module">
  const MATCH_ICONS: Record<"all" | "raw" | "name" | "role", IconName> = {
    name: "signature",
    raw: "cog",
    role: "masks_theater",
    all: "asterisk",
  }
</script>

<script lang="ts">
	import type { IconName } from "../Icon.svelte";
	import BFormOption from "../bforms/BFormOption.svelte";
	import BFormParameter from "../bforms/BFormParameter.svelte";

  export let matchKind: "all" | "name" | "role" | "raw";
  export let matchValue: string;

  function toggleMatchKind() {
    switch (matchKind) {
      case "all": matchKind = "name"; break;
      case "name": matchKind = "role"; break;
      case "role": matchKind = "raw"; break;
      case "raw": matchKind = "all"; break;
    }
  }

</script>

<BFormOption on:click={toggleMatchKind} state icon={MATCH_ICONS[matchKind]}>
  {#if matchKind !== "all"}
    <BFormParameter
      wide={matchKind === "raw"}
      type="text"
      label="Match ({matchKind})"
      bind:value={matchValue}
    />
  {/if}
</BFormOption>