import { createSignal, onMount, onCleanup } from 'solid-js';

interface PasskeyToastProps {
  site: string;
  displayName: string;
  username: string;
  requestId: string;
  onSignIn: () => void;
  onDeny: () => void;
}

const TIMEOUT_MS = 30_000;

export function PasskeyToast(props: PasskeyToastProps) {
  const [visible, setVisible] = createSignal(false);
  const [exiting, setExiting] = createSignal(false);
  let timeoutId: number;

  onMount(() => {
    requestAnimationFrame(() => setVisible(true));

    timeoutId = window.setTimeout(() => {
      handleDeny();
    }, TIMEOUT_MS);
  });

  onCleanup(() => {
    clearTimeout(timeoutId);
  });

  function handleSignIn() {
    clearTimeout(timeoutId);
    exit(props.onSignIn);
  }

  function handleDeny() {
    clearTimeout(timeoutId);
    exit(props.onDeny);
  }

  function exit(callback: () => void) {
    setExiting(true);
    setTimeout(callback, 220);
  }

  // on:click bypasses Solid's document-level event delegation, which breaks
  // inside shadow DOM because event.target is retargeted to the shadow host.
  return (
    <div
      class={[
        'peach-passkey-toast',
        visible() ? 'is-visible' : '',
        exiting() ? 'is-exiting' : '',
      ].join(' ')}
    >
      <div class="peach-passkey-toast-body">
        <h2 class="peach-passkey-toast-headline">
          sign in to {props.site}?
        </h2>

        <div class="peach-passkey-toast-user">
          {props.displayName} · {props.username}
        </div>

        <div class="peach-passkey-toast-countdown">
          <div
            class="peach-passkey-toast-countdown-bar"
            style={{ 'animation-duration': `${TIMEOUT_MS}ms` }}
          />
        </div>

        <div class="peach-passkey-toast-actions">
          <button
            class="peach-passkey-toast-btn peach-passkey-toast-btn--deny"
            on:click={handleDeny}
          >
            deny
          </button>
          <button
            class="peach-passkey-toast-btn peach-passkey-toast-btn--signin"
            on:click={handleSignIn}
          >
            sign in
          </button>
        </div>
      </div>
    </div>
  );
}