<script lang="ts">
  import Input from '@components/input/Input.svelte';
  import Select from '@components/input/Select.svelte';
  import { uuidFromUsername } from '@app/admin/tools/tools.ts';

  // states
  let edition = $state<'java' | 'bedrock'>('java');
  let username = $state('');
  let uuid = $state<null | string>(null);

  // callbacks
  async function onSubmit() {
    uuid = await uuidFromUsername(edition, username);
  }
</script>

<fieldset class="fieldset border border-base-200 rounded-box px-4">
  <legend class="fieldset-legend">Account UUID finder</legend>
  <div>
    <div class="flex gap-3">
      <Input bind:value={username} />
      <Select bind:value={edition} values={{ java: 'Java', bedrock: 'Bedrock' }} />
    </div>
    <div class="flex justify-center">
      <button class="btn w-4/6" class:disabled={!username} onclick={onSubmit}>UUID finden</button>
    </div>
    <Input bind:value={uuid} readonly />
  </div>
</fieldset>
