import type { JSX, ValidComponent } from "@solidjs/web";
import { dynamic } from "@solidjs/web";
import { omit } from "solid-js";
import { mergeRootProps } from "../../internals/merge-root-props";
import { resolveClassStyle } from "../../internals/resolve-class-style";
import type { BaseUIComponentProps } from "../../internals/types";
import {
	type AccordionItemState,
	useAccordionItemContext,
} from "../accordion-item-context.ts";

export interface AccordionHeaderState extends AccordionItemState {}

export interface AccordionHeaderProps
	extends BaseUIComponentProps<"h3", AccordionHeaderState> {
	/** Tag/component to render. Defaults to `"h3"`. */
	as?: ValidComponent;
}

/**
 * Heading that labels the accordion's collapsible panel. Renders an `<h3>`
 * element by default — override via `as` for a different heading level.
 *
 * The header inherits all item-level data attributes (`data-open`,
 * `data-closed`, `data-disabled`, `data-index`) so consumers can style
 * heading + trigger together.
 */
export function AccordionHeader(props: AccordionHeaderProps): JSX.Element {
	const item = useAccordionItemContext();

	const userStyling = resolveClassStyle(props, () => item.state());

	const userHtmlProps = omit(props, "class", "style", "attrs", "as") as Record<
		string,
		unknown
	>;

	const internalProps = {
		get "data-open"(): "" | undefined {
			return item.state().open ? "" : undefined;
		},
		get "data-closed"(): "" | undefined {
			return item.state().open ? undefined : "";
		},
		get "data-disabled"(): "" | undefined {
			return item.state().disabled ? "" : undefined;
		},
		get "data-index"() {
			const i = item.state().index;
			return Number.isInteger(i) ? String(i) : undefined;
		},
	};

	const styledUserProps = mergeRootProps(userStyling, userHtmlProps);

	const merged = mergeRootProps(internalProps, styledUserProps);

	const Tag = dynamic(() => props.as ?? "h3");
	return <Tag {...merged} />;
}