<script>

  import Button from '$lib/components/base/button.svelte';

  import Field from '$lib/components/base/field.svelte';

  import Input from '$lib/components/base/input.svelte';

  import { focusTrap } from '$lib/actions/focus-trap.svelte';

</script>

<!-- Use focusTrap to keep focus within the form -->

<form use:focusTrap class="flex flex-col gap-2 border p-4">

  <p>Press tab key to cycle through focusable elements.</p>

  <Field label="Email">

    <Input type="email" />

  </Field>

  <Field label="Password">

    <Input type="password" />

  </Field>

  <Field class="mt-4 flex justify-end">

    <Button>Sign In</Button>

  </Field>

</form>

export function focusTrap(node: HTMLElement) {

  const focusableSelectors = ['a[href]', 'button', 'input', 'textarea', 'select', '[tabindex]:not([tabindex="-1"])'];

  function getFocusableElements() {

    return Array.from(node.querySelectorAll<HTMLElement>(focusableSelectors.join(','))).filter(

      (el) => !el.hasAttribute('disabled') && !el.getAttribute('aria-hidden')

    );

  }

  function handleKeyDown(event: KeyboardEvent) {

    if (event.key !== 'Tab') return;

    const focusableElements = getFocusableElements();

    const firstElement = focusableElements[0];

    const lastElement = focusableElements[focusableElements.length - 1];

    if (event.shiftKey && document.activeElement === firstElement) {

      event.preventDefault();

      lastElement?.focus();

    } else if (!event.shiftKey && document.activeElement === lastElement) {

      event.preventDefault();

      firstElement?.focus();

    }

  }

  $effect(() => {

    const focusableElements = getFocusableElements();

    focusableElements[0]?.focus();

    node.addEventListener('keydown', handleKeyDown);

    return () => {

      node.removeEventListener('keydown', handleKeyDown);

    };

  });

}