import type { Accessor } from "solid-js";
import { For, Show, createEffect } from "solid-js";
import type { Dictionary } from "@ben-to/i18n/dictionary";
import { publicAssetHref } from "./builder-flow/public-asset";

export function WelcomeTourModal(props: {
  readonly t: Accessor<Dictionary>;
  readonly open: Accessor<boolean>;
  readonly onDismiss: () => void;
}) {
  let primaryButton: HTMLButtonElement | undefined;

  createEffect(() => {
    if (!props.open()) return;
    queueMicrotask(() => primaryButton?.focus());
  });

  const bullets = () =>
    [
      props.t().welcomeTourBulletSteps,
      props.t().welcomeTourBulletFilters,
      props.t().welcomeTourBulletServings,
      props.t().welcomeTourBulletShare
    ] as const;

  return (
    <Show when={props.open()}>
      <div
        class="welcome-tour__backdrop"
        role="presentation"
        aria-hidden="true"
        onClick={() => props.onDismiss()}
      />
      <div
        id="welcome-tour-dialog"
        class="welcome-tour"
        role="dialog"
        aria-modal="true"
        aria-labelledby="welcome-tour-heading"
        aria-describedby="welcome-tour-intro"
      >
        <div class="welcome-tour__inner">
          <h2 id="welcome-tour-heading" class="welcome-tour__title">
            {props.t().welcomeTourTitle}
          </h2>
          <p id="welcome-tour-intro" class="welcome-tour__intro">
            {props.t().welcomeTourIntro}
          </p>
          <ul class="welcome-tour__bullets">
            <For each={bullets()}>{(text) => <li>{text}</li>}</For>
          </ul>
          <div class="welcome-tour__gifs">
            <figure class="welcome-tour__figure">
              <img
                class="welcome-tour__gif"
                src={publicAssetHref("/tour/flow-builder.gif")}
                alt={props.t().welcomeTourGifFlowAlt}
                width={360}
                height={202}
                loading="lazy"
                decoding="async"
              />
            </figure>
            <figure class="welcome-tour__figure">
              <img
                class="welcome-tour__gif"
                src={publicAssetHref("/tour/recipe-sheet.gif")}
                alt={props.t().welcomeTourGifRecipeAlt}
                width={360}
                height={202}
                loading="lazy"
                decoding="async"
              />
            </figure>
          </div>
          <div class="welcome-tour__actions">
            <button
              type="button"
              class="welcome-tour__btn welcome-tour__btn--primary"
              ref={(el) => (primaryButton = el)}
              onClick={() => props.onDismiss()}
            >
              {props.t().welcomeTourCtaStart}
            </button>
            <button type="button" class="welcome-tour__btn welcome-tour__btn--ghost" onClick={() => props.onDismiss()}>
              {props.t().welcomeTourCtaClose}
            </button>
          </div>
        </div>
      </div>
    </Show>
  );
}
