import { For, Show } from "solid-js";
import type { Accessor, Setter } from "solid-js";
import type { BaseOption, BentoSelection, VariantOption } from "@ben-to/builder/domain";
import { primaryBaseIdForVariant } from "@ben-to/builder/domain";
import type { LocaleCode } from "@ben-to/i18n/dictionary";
import type { DictionaryView } from "./dictionary-view";
import { SpriteTile } from "./SpriteTile";
import { publicAssetHref } from "./public-asset";

export function BuilderVariantStep(props: {
  readonly t: Accessor<DictionaryView>;
  readonly locale: Accessor<LocaleCode>;
  readonly currentBase: Accessor<BaseOption | undefined>;
  readonly availableVariants: Accessor<VariantOption[]>;
  readonly selection: () => BentoSelection;
  readonly setSelection: Setter<BentoSelection>;
  readonly advanceAfterVariantPickDouble: () => void;
  readonly onPickCardTouchEndForDouble: (
    cardKey: string,
    advance: () => void
  ) => (e: TouchEvent) => void;
}) {
  return (
    <section aria-label={props.t().selectVariant}>
      <Show when={props.currentBase()}>
        {(base) => (
          <p class="builder-variant-base-reminder" role="status">
            <span class="builder-variant-base-reminder__media" aria-hidden="true">
              <Show when={base().coverImageUrl}>
                <img
                  class="builder-variant-base-reminder__icon"
                  src={publicAssetHref(base().coverImageUrl)}
                  width="28"
                  height="28"
                  alt=""
                  decoding="async"
                />
              </Show>
              <Show when={!base().coverImageUrl && base().coverSprite}>
                <SpriteTile
                  sprite={base().coverSprite!}
                  size={28}
                  class="builder-variant-base-reminder__sprite"
                />
              </Show>
            </span>
            <span class="builder-variant-base-reminder__text">
              {props.t().builderVariantBaseReminderTemplate.replace("{base}", base().name[props.locale()])}
            </span>
          </p>
        )}
      </Show>
      <div class="cards">
        <For each={props.availableVariants()}>
          {(variant) => (
            <button
              type="button"
              class={`card card--pick ${props.selection().variantId === variant.id ? "selected" : ""}`}
              onClick={() =>
                props.setSelection((prev) => ({
                  ...prev,
                  variantId: variant.id,
                  baseId: primaryBaseIdForVariant(variant, prev.baseId)
                }))
              }
              onDblClick={() => props.advanceAfterVariantPickDouble()}
              onTouchEnd={props.onPickCardTouchEndForDouble(
                `variant:${variant.id}`,
                props.advanceAfterVariantPickDouble
              )}
            >
              <Show when={variant.coverImageUrl}>
                <img class="card__pick-icon" src={publicAssetHref(variant.coverImageUrl)} alt="" />
              </Show>
              <Show when={!variant.coverImageUrl && variant.coverSprite}>
                <SpriteTile
                  sprite={variant.coverSprite!}
                  size={32}
                  class="card__sprite card__pick-sprite"
                />
              </Show>
              <span class="card__pick-name">{variant.name[props.locale()]}</span>
            </button>
          )}
        </For>
      </div>
    </section>
  );
}
