import type { Accessor } from "solid-js";
import { createEffect, onCleanup, Show } from "solid-js";
import type { BaseOption, StepKind, VariantOption } 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 BuilderCtaDock(props: {
  readonly canContinue: Accessor<boolean>;
  readonly currentStep: Accessor<StepKind>;
  readonly currentBase: Accessor<BaseOption | undefined>;
  readonly currentVariant: Accessor<VariantOption | undefined>;
  readonly locale: Accessor<LocaleCode>;
  readonly t: Accessor<DictionaryView>;
  readonly nextStep: () => void;
}) {
  let dockEl: HTMLDivElement | undefined;
  let dockObserver: ResizeObserver | undefined;

  const updateDockHeight = () => {
    document.documentElement.style.setProperty(
      "--cta-dock-height",
      props.canContinue() && dockEl ? `${Math.ceil(dockEl.getBoundingClientRect().height)}px` : "0px"
    );
  };

  const observeDock = () => {
    dockObserver?.disconnect();
    if (!props.canContinue() || !dockEl) return;
    dockObserver = new ResizeObserver(updateDockHeight);
    dockObserver.observe(dockEl);
    updateDockHeight();
  };

  createEffect(() => {
    if (!props.canContinue()) {
      dockObserver?.disconnect();
      dockObserver = undefined;
      document.documentElement.style.setProperty("--cta-dock-height", "0px");
      return;
    }

    observeDock();
  });

  onCleanup(() => {
    dockObserver?.disconnect();
    document.documentElement.style.removeProperty("--cta-dock-height");
  });

  return (
    <Show when={props.canContinue()}>
      <div
        class="cta-dock"
        role="presentation"
        ref={(el) => {
          dockEl = el;
          observeDock();
        }}
      >
        <div class="cta-dock__inner">
          <Show when={props.currentStep() === "base" && props.currentBase()} keyed>
            {(base: BaseOption) => {
              const hasMedia = Boolean(base.coverImageUrl || base.coverSprite);
              return (
                <div class="cta-context" classList={{ "cta-context--with-media": hasMedia }}>
                  {base.coverImageUrl ? (
                    <div class="cta-context__media">
                      <img
                        class="cta-context__icon"
                        src={publicAssetHref(base.coverImageUrl)}
                        alt=""
                        width="32"
                        height="32"
                      />
                    </div>
                  ) : base.coverSprite ? (
                    <div class="cta-context__media">
                      <SpriteTile sprite={base.coverSprite} size={32} class="cta-context__sprite" />
                    </div>
                  ) : null}
                  <p class="cta-context__title">{base.name[props.locale()]}</p>
                  <p class="cta-context__subtitle">{base.history[props.locale()]}</p>
                </div>
              );
            }}
          </Show>
          <Show when={props.currentStep() === "variant" && props.currentVariant()} keyed>
            {(variant: VariantOption) => {
              const hasMedia = Boolean(variant.coverImageUrl || variant.coverSprite);
              return (
                <div class="cta-context" classList={{ "cta-context--with-media": hasMedia }}>
                  {variant.coverImageUrl ? (
                    <div class="cta-context__media">
                      <img
                        class="cta-context__icon"
                        src={publicAssetHref(variant.coverImageUrl)}
                        alt=""
                        width="32"
                        height="32"
                      />
                    </div>
                  ) : variant.coverSprite ? (
                    <div class="cta-context__media">
                      <SpriteTile sprite={variant.coverSprite} size={32} class="cta-context__sprite" />
                    </div>
                  ) : null}
                  <p class="cta-context__title">{variant.name[props.locale()]}</p>
                  <p class="cta-context__subtitle">{variant.story[props.locale()]}</p>
                </div>
              );
            }}
          </Show>
          <button type="button" class="cta" onClick={props.nextStep}>
            {props.t().continue}
          </button>
        </div>
      </div>
    </Show>
  );
}
