<script lang="ts">
  import { Listgroup, ListgroupItem, Modal, Radio } from "flowbite-svelte";
  import Totp from "./TwoFactorRegistration/TOTP.svelte";
  import WebAuthn from "./TwoFactorRegistration/WebAuthn.svelte";

  export let open: boolean;

  let selectedType = undefined;
  $: {
    if (!open) {
      selectedType = undefined;
    }
  }
</script>

<Modal bind:open size="md" autoclose={false} class="w-full">
  {#if !selectedType}
    <h3 class="text-xl font-medium text-gray-900 dark:text-white p-0">
      Select type
    </h3>
    <Listgroup active class="w-full">
      <ListgroupItem
        class="gap-2 px-4 py-4"
        on:click={() => (selectedType = "totp")}>TOTP</ListgroupItem
      >
      <ListgroupItem
        class="gap-2 px-4 py-4"
        on:click={() => (selectedType = "webauthn")}>WebAuthn</ListgroupItem
      >
    </Listgroup>
  {:else if selectedType == "totp"}
    <Totp on:reload />
  {:else if selectedType == "webauthn"}
    <WebAuthn on:reload />
  {/if}
</Modal>
