import type { RouteSectionProps } from "@solidjs/router";
import type { BentoSelection } from "@ben-to/builder/domain";
import { createInitialSelection } from "@ben-to/builder/domain";
import { fetchRecipesIndex } from "@ben-to/recipes/catalog";
import { getDictionary } from "@ben-to/i18n/dictionary";
import { createEffect, createMemo, createResource, createSignal, Show } from "solid-js";
import { clearBuilderResetBus, readBuilderResetNonce } from "./builder-reset-bus";
import { useAppLocale } from "./app-locale-context";
import { BuilderBaseStep } from "./builder-flow/BuilderBaseStep";
import { BuilderCtaDock } from "./builder-flow/BuilderCtaDock";
import { BuilderStepsNav } from "./builder-flow/BuilderStepsNav";
import { BuilderVariantStep } from "./builder-flow/BuilderVariantStep";
import { RecipeSheetSection } from "./builder-flow/RecipeSheetSection";
import { useBuilderCatalog } from "./builder-flow/use-builder-catalog";
import { useBuilderSteps } from "./builder-flow/use-builder-steps";
import { useRecipeSheet } from "./builder-flow/use-recipe-sheet";

export function BuilderFlow(_props: RouteSectionProps) {
  const { locale } = useAppLocale();
  const [selection, setSelection] = createSignal<BentoSelection>(createInitialSelection());
  const [recipesIndex] = createResource(async () => fetchRecipesIndex());
  const t = createMemo(() => getDictionary(locale()));

  const steps = useBuilderSteps({
    selection,
    setSelection,
    recipesIndex
  });

  const catalog = useBuilderCatalog({
    recipesIndex,
    selection,
    flavorFilter: steps.flavorFilter,
    locale
  });

  const recipe = useRecipeSheet({
    selection,
    currentStep: steps.currentStep,
    mergedRecipe: catalog.mergedRecipe,
    recipeDisplayTitle: catalog.recipeDisplayTitle,
    locale,
    t
  });

  createEffect(() => {
    const n = readBuilderResetNonce();
    if (n === 0) return;
    steps.goHomeWizard();
    recipe.resetServingsForGoHome();
    clearBuilderResetBus();
  });

  return (
    <main
      classList={{
        "app-shell": true,
        "app-shell--with-dock": steps.canContinue(),
        "app-shell--internal-scroll": true,
        "app-shell--recipe-scroll": steps.currentStep() === "recipe"
      }}
    >
      <BuilderStepsNav
        t={t}
        progressStepIndex={steps.progressStepIndex}
        progressPercent={steps.progressPercent}
        canNavigateToStep={steps.canNavigateToStep}
        goToBuilderStep={steps.goToBuilderStep}
        currentStep={steps.currentStep}
        recipeProgressCompact={recipe.recipeProgressCompact}
      />

      <Show when={steps.currentStep() === "base"}>
        <div class="builder-scroll">
          <BuilderBaseStep
            t={t}
            locale={locale}
            recipesIndex={recipesIndex}
            filteredBases={catalog.filteredBases}
            flavorFilter={steps.flavorFilter}
            setFlavorFilter={steps.setFlavorFilter}
            selection={selection}
            setSelection={setSelection}
            advanceAfterBasePickDouble={steps.advanceAfterBasePickDouble}
            onPickCardTouchEndForDouble={steps.onPickCardTouchEndForDouble}
          />
        </div>
      </Show>

      <Show when={steps.currentStep() === "variant"}>
        <div class="builder-scroll">
          <BuilderVariantStep
            t={t}
            locale={locale}
            currentBase={catalog.currentBase}
            availableVariants={catalog.availableVariants}
            selection={selection}
            setSelection={setSelection}
            advanceAfterVariantPickDouble={steps.advanceAfterVariantPickDouble}
            onPickCardTouchEndForDouble={steps.onPickCardTouchEndForDouble}
          />
        </div>
      </Show>

      <RecipeSheetSection
        currentStep={steps.currentStep}
        locale={locale}
        t={t}
        recipeCoverImageUrl={catalog.recipeCoverImageUrl}
        recipeDisplayTitle={catalog.recipeDisplayTitle}
        mergedRecipe={catalog.mergedRecipe}
        recipe={recipe}
      />

      <BuilderCtaDock
        canContinue={steps.canContinue}
        currentStep={steps.currentStep}
        currentBase={catalog.currentBase}
        currentVariant={catalog.currentVariant}
        locale={locale}
        t={t}
        nextStep={steps.nextStep}
      />
    </main>
  );
}
