import { createContext, useContext, useId, type ReactNode } from "react";
import type { StatusNotice, ThemeName, ViewState } from "./types";

const InsideRoot = createContext(false);

export function themeProps(theme: ThemeName = "system") {
  return { className: "cw-root", "data-theme": theme };
}

export function Section({
  title,
  titleId,
  description,
  theme = "system",
  state = "ready",
  error,
  empty = false,
  emptyMessage = "Nothing to show for this period.",
  className,
  children,
  headingLevel = 2,
}: {
  title: string;
  titleId?: string;
  description?: string;
  theme?: ThemeName;
  state?: ViewState;
  error?: StatusNotice | null;
  empty?: boolean;
  emptyMessage?: string;
  className?: string;
  children?: ReactNode;
  headingLevel?: 2 | 3;
}) {
  const inside = useContext(InsideRoot);
  const generatedId = useId();
  const headingId = titleId ?? generatedId;
  const Heading = headingLevel === 3 ? "h3" : "h2";
  const root = inside ? undefined : themeProps(theme);

  return (
    <section
      {...(root ?? {})}
      className={["cw-section", root?.className, className].filter(Boolean).join(" ")}
      aria-labelledby={headingId}
      aria-busy={state === "loading" || undefined}
    >
      <Heading id={headingId} className="cw-title">
        {title}
      </Heading>
      {description ? <p className="cw-note">{description}</p> : null}
      {state === "loading" ? <p className="cw-status">Loading</p> : null}
      {state === "error" ? (
        <p className="cw-status cw-status-error" role="alert">
          {error?.message ?? "Analytics could not be displayed."}
        </p>
      ) : null}
      {state === "ready" && empty ? <p className="cw-status">{emptyMessage}</p> : null}
      {state === "ready" && !empty ? children : null}
    </section>
  );
}

export function Root({
  theme = "system",
  className,
  children,
}: {
  theme?: ThemeName;
  className?: string;
  children: ReactNode;
}) {
  const props = themeProps(theme);
  return (
    <InsideRoot.Provider value={true}>
      <div {...props} className={[props.className, className].filter(Boolean).join(" ")}>
        {children}
      </div>
    </InsideRoot.Provider>
  );
}