import type { ClassAttributes, ComponentChildren, JSX, VNode } from "preact";

import i18n from "gettext.js";

import { flatten, primary, references, relations } from "./db.js";
import { useApi } from "./use-api.js";
import { useEnhance } from "./use-enhance.js";

export interface DehydratedState {
  queries: { queryHash: string; state: QueryState }[];
}

export interface QueryState {
  data: any; // eslint-disable-line @typescript-eslint/no-explicit-any
  dataUpdatedAt: number;
  error: null | unknown;
  isInvalidated: boolean;
  status: "error" | "loading" | "success";
}

type H<T extends keyof JSX.IntrinsicElements> = (
  props: (ClassAttributes<HTMLElement> & JSX.IntrinsicElements[T]) | null,
  ...children: ComponentChildren[]
) => VNode<ClassAttributes<HTMLElement> & JSX.IntrinsicElements[T]>;

export function dehydrate(
  queryClient: ReturnType<typeof useQueryClient>,
  options: {
    shouldRedactErrors: (error: unknown) => boolean;
  },
): DehydratedState;

export function getI18n(...langs: string[]): Promise<i18n.Gettext>;

export function hydrate(
  App: (props: {
    dehydratedState?: DehydratedState | undefined;
    i18n: i18n.Gettext;
  }) => VNode<any>, // eslint-disable-line @typescript-eslint/no-explicit-any
  renderTarget: string,
): Promise<void>;

export function Router({
  children,
  dehydratedState,
  i18n,
}: {
  children?: ComponentChildren;
  dehydratedState?: DehydratedState | undefined;
  i18n: i18n.Gettext;
}): VNode<any>; // eslint-disable-line @typescript-eslint/no-explicit-any

export function ssr(
  App: (props: {
    dehydratedState?: DehydratedState | undefined;
    i18n: i18n.Gettext;
  }) => VNode<any>, // eslint-disable-line @typescript-eslint/no-explicit-any
  data: { lang?: string; url: string },
): Promise<{
  data: {
    dehydratedState: DehydratedState;
    lang?: string;
    url: string;
  };
  head: {
    elements: Set<{
      props: Record<string, string>;
      type: string;
    }>;
    lang: string;
    title: string;
  };
  html: string;
  links: Set<string> | undefined;
}>;

export function useI18n(): i18n.Gettext;

export function useQueryClient(): {
  invalidateQueries(): void;
};

export function useStatus(error: unknown): string;

export const a: H<"a">;
export const address: H<"address">;
export const article: H<"article">;
export const aside: H<"aside">;
export const audio: H<"audio">;
export const b: H<"b">;
export const blockquote: H<"blockquote">;
export const br: H<"br">;
export const button: H<"button">;
export const canvas: H<"canvas">;
export const circle: H<"circle">;
export const code: H<"code">;
export const del: H<"del">;
export const details: H<"details">;
export const dialog: H<"dialog">;
export const div: H<"div">;
export const ellipse: H<"ellipse">;
export const em: H<"em">;
export const fieldset: H<"fieldset">;
export const figcaption: H<"figcaption">;
export const figure: H<"figure">;
export const footer: H<"footer">;
export const form: H<"form">;
export const h1: H<"h1">;
export const h2: H<"h2">;
export const h3: H<"h3">;
export const h4: H<"h4">;
export const h5: H<"h5">;
export const h6: H<"h6">;
export const header: H<"header">;
export const hgroup: H<"hgroup">;
export const hr: H<"hr">;
export const i: H<"i">;
export const iframe: H<"iframe">;
export const img: H<"img">;
export const input: H<"input">;
export const ins: H<"ins">;
export const label: H<"label">;
export const legend: H<"legend">;
export const li: H<"li">;
export const main: H<"main">;
export const nav: H<"nav">;
export const ol: H<"ol">;
export const option: H<"option">;
export const p: H<"p">;
export const path: H<"path">;
export const picture: H<"picture">;
export const polyline: H<"polyline">;
export const pre: H<"pre">;
export const rect: H<"rect">;
export const section: H<"section">;
export const select: H<"select">;
export const small: H<"small">;
export const source: H<"source">;
export const span: H<"span">;
export const strong: H<"strong">;
export const sub: H<"sub">;
export const summary: H<"summary">;
export const sup: H<"sup">;
export const svg: H<"svg">;
export const table: H<"table">;
export const tbody: H<"tbody">;
export const td: H<"td">;
export const text: H<"text">;
export const textarea: H<"textarea">;
export const th: H<"th">;
export const thead: H<"thead">;
export const title: H<"title">;
export const tr: H<"tr">;
export const ul: H<"ul">;
export const video: H<"video">;

export { flatten, primary, references, relations };
export { useApi, useEnhance };