import type { Accessor } from "solid-js";
import type { StepKind } from "@ben-to/builder/domain";
import type { DictionaryView } from "./dictionary-view";

export function BuilderStepsNav(props: {
  readonly t: Accessor<DictionaryView>;
  readonly progressStepIndex: Accessor<number>;
  readonly progressPercent: Accessor<number>;
  readonly canNavigateToStep: (step: StepKind) => boolean;
  readonly goToBuilderStep: (step: StepKind) => void;
  readonly currentStep: Accessor<StepKind>;
  readonly recipeProgressCompact: Accessor<boolean>;
}) {
  return (
    <nav
      class="builder-steps"
      classList={{
        "builder-steps--compact": props.currentStep() === "recipe" && props.recipeProgressCompact()
      }}
      aria-label={props.t().progress}
    >
      <ol class="builder-steps__list">
        <li
          class="builder-steps__step"
          classList={{
            "builder-steps__step--done": props.progressStepIndex() > 0,
            "builder-steps__step--current": props.progressStepIndex() === 0
          }}
          aria-current={props.progressStepIndex() === 0 ? "step" : undefined}
        >
          <button
            type="button"
            class="builder-steps__badge"
            aria-label={props.t().builderNavToBase}
            onClick={() => props.goToBuilderStep("base")}
          >
            1
          </button>
          <span class="builder-steps__label">{props.t().builderStepBase}</span>
        </li>
        <li
          class="builder-steps__step"
          classList={{
            "builder-steps__step--done": props.progressStepIndex() > 1,
            "builder-steps__step--current": props.progressStepIndex() === 1
          }}
          aria-current={props.progressStepIndex() === 1 ? "step" : undefined}
        >
          <button
            type="button"
            class="builder-steps__badge"
            disabled={!props.canNavigateToStep("variant")}
            aria-label={
              props.canNavigateToStep("variant")
                ? props.t().builderNavToVariant
                : props.t().builderNavVariantDisabled
            }
            onClick={() => props.goToBuilderStep("variant")}
          >
            2
          </button>
          <span class="builder-steps__label">{props.t().builderStepVariant}</span>
        </li>
        <li
          class="builder-steps__step"
          classList={{
            "builder-steps__step--done": props.progressStepIndex() > 2,
            "builder-steps__step--current": props.progressStepIndex() === 2
          }}
          aria-current={props.progressStepIndex() === 2 ? "step" : undefined}
        >
          <button
            type="button"
            class="builder-steps__badge"
            disabled={!props.canNavigateToStep("recipe")}
            aria-label={
              props.canNavigateToStep("recipe")
                ? props.t().builderNavToRecipe
                : props.t().builderNavRecipeDisabled
            }
            onClick={() => props.goToBuilderStep("recipe")}
          >
            3
          </button>
          <span class="builder-steps__label">{props.t().builderStepRecipe}</span>
        </li>
      </ol>
      <div class="builder-steps__track" aria-hidden="true">
        <div class="builder-steps__fill" style={{ width: `${props.progressPercent()}%` }} />
      </div>
    </nav>
  );
}
