import { Show } from "solid-js";
import type { JSX } from "solid-js";
import { CardIcon } from "./CardIcon";
import type { StackCardSpec } from "./types";

interface StackCardProps {
  spec: StackCardSpec;
  active: boolean;
  focused?: boolean;
  concealed?: boolean;
  celebrating?: boolean;
  top: number;
  zIndex: number;
  height: number;
  onClick: () => void;
  children: JSX.Element;
}

export function StackCard(props: StackCardProps) {
  return (
    <article
      class={`stk-card ${props.active ? "is-active" : "is-tab"} ${props.focused ? "is-focused" : ""} ${props.concealed ? "is-concealed" : ""} ${props.celebrating ? "is-celebrating" : ""}`}
      data-settings-card-id={props.spec.id}
      data-active={props.active ? "true" : "false"}
      role={props.active || props.concealed ? undefined : "button"}
      aria-hidden={props.concealed ? "true" : undefined}
      aria-label={props.active || props.concealed ? undefined : `Open ${props.spec.title}`}
      tabIndex={props.active || props.concealed ? -1 : 0}
      onClick={() => {
        if (!props.active && !props.concealed) props.onClick();
      }}
      onKeyDown={(e) => {
        if (props.active) return;
        if (e.key === "Enter" || e.key === " ") {
          e.preventDefault();
          props.onClick();
        }
      }}
      style={{
        background: `var(${props.spec.bgVar})`,
        color: `var(${props.spec.fgVar})`,
        "--stk-card-top": `${props.top}px`,
        transform: `translateY(var(--stk-card-top))`,
        "z-index": props.zIndex,
        height: `${props.height}px`,
      }}
    >
      <div class="stk-card-top">
        <span class="stk-card-num">{props.spec.num}</span>
        <Show
          when={props.spec.onIconClick}
          fallback={<span class="stk-card-icon"><CardIcon kind={props.spec.icon} /></span>}
        >
          <button
            class="stk-card-icon stk-card-icon--btn"
            type="button"
            aria-label="Celebrate"
            onClick={(e) => { e.stopPropagation(); props.spec.onIconClick!(); }}
          >
            <CardIcon kind={props.spec.icon} />
          </button>
        </Show>
      </div>
      <h2 class="stk-card-title">{props.spec.title}</h2>
      <p class="stk-card-lede">{props.spec.lede}</p>
      <div class="stk-card-body">{props.children}</div>
    </article>
  );
}