import type { Accessor, Resource, Setter } from "solid-js";
import { For, Show } from "solid-js";
import type { BaseOption, BentoSelection } from "@ben-to/builder/domain";
import type { RecipesIndex } from "@ben-to/recipes/catalog";
import type { LocaleCode } from "@ben-to/i18n/dictionary";
import type { DictionaryView } from "./dictionary-view";
import type { FlavorFilter } from "./builder-flow-types";
import { SpriteTile } from "./SpriteTile";
import { publicAssetHref } from "./public-asset";

export function BuilderBaseStep(props: {
  readonly t: Accessor<DictionaryView>;
  readonly locale: Accessor<LocaleCode>;
  readonly recipesIndex: Resource<RecipesIndex | undefined>;
  readonly filteredBases: Accessor<BaseOption[]>;
  readonly flavorFilter: Accessor<FlavorFilter>;
  readonly setFlavorFilter: Setter<FlavorFilter>;
  readonly selection: Accessor<BentoSelection>;
  readonly setSelection: Setter<BentoSelection>;
  readonly advanceAfterBasePickDouble: () => void;
  readonly onPickCardTouchEndForDouble: (
    cardKey: string,
    advance: () => void
  ) => (e: TouchEvent) => void;
}) {
  return (
    <section aria-label={props.t().selectBase}>
      <div class="filters">
        <button
          type="button"
          class={props.flavorFilter() === "all" ? "chip selected" : "chip"}
          onClick={() => props.setFlavorFilter("all")}
        >
          {props.t().filterAll}
        </button>
        <button
          type="button"
          class={props.flavorFilter() === "savory" ? "chip selected" : "chip"}
          onClick={() => props.setFlavorFilter("savory")}
        >
          {props.t().filterSavory}
        </button>
        <button
          type="button"
          class={props.flavorFilter() === "sweet" ? "chip selected" : "chip"}
          onClick={() => props.setFlavorFilter("sweet")}
        >
          {props.t().filterSweet}
        </button>
      </div>
      <Show when={props.recipesIndex.loading}>
        <p>{props.t().loading}</p>
      </Show>
      <Show when={props.recipesIndex.error}>
        <p role="alert">{props.t().loadError}</p>
      </Show>
      <div class="cards">
        <For each={props.filteredBases()}>
          {(base) => (
            <button
              type="button"
              class={`card card--pick ${props.selection().baseId === base.id ? "selected" : ""}`}
              onClick={() => props.setSelection((prev) => ({ ...prev, baseId: base.id, variantId: null }))}
              onDblClick={() => props.advanceAfterBasePickDouble()}
              onTouchEnd={props.onPickCardTouchEndForDouble(`base:${base.id}`, props.advanceAfterBasePickDouble)}
            >
              <Show when={base.coverImageUrl}>
                <img class="card__pick-icon" src={publicAssetHref(base.coverImageUrl)} alt="" />
              </Show>
              <Show when={!base.coverImageUrl && base.coverSprite}>
                <SpriteTile
                  sprite={base.coverSprite!}
                  size={32}
                  class="card__sprite card__pick-sprite"
                />
              </Show>
              <span class="card__pick-name">{base.name[props.locale()]}</span>
            </button>
          )}
        </For>
      </div>
    </section>
  );
}
