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, Orientation } from "../internals/types";
import {
	ToolbarGroupContext,
	type ToolbarGroupContextValue,
} from "./toolbar-group-context.ts";
import { useToolbarRootContext } from "./toolbar-root-context.ts";

export interface ToolbarGroupState {
	disabled: boolean;
	orientation: Orientation;
}

export interface ToolbarGroupProps
	extends BaseUIComponentProps<"div", ToolbarGroupState> {
	/** Tag/component to render. Defaults to `"div"`. */
	as?: ValidComponent;
	/**
	 * When `true`, every toolbar item inside this group is disabled.
	 * @default false
	 */
	disabled?: boolean | undefined;
}

/**
 * Groups several toolbar items (buttons, toggles, etc.) under a shared
 * `disabled` flag. Renders a `<div role="group">` (or `as` override) and
 * publishes a context value consumed by descendant `<Toolbar.Button>`s.
 */
export function ToolbarGroup(props: ToolbarGroupProps): JSX.Element {
	const toolbar = useToolbarRootContext();

	const ownDisabled = (): boolean => props.disabled === true;
	const disabled = (): boolean => toolbar.disabled() || ownDisabled();
	const orientation = (): Orientation => toolbar.orientation();

	const contextValue: ToolbarGroupContextValue = {
		disabled,
		present: true,
	};
	const userClassStyle = resolveClassStyle(props, () => ({
		disabled: disabled(),
		orientation: orientation(),
	}));

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

	const internalProps = {
		role: "group" as const,
		get "data-orientation"() {
			return orientation();
		},
		get "data-disabled"(): "" | undefined {
			return disabled() ? "" : undefined;
		},
	};

	const merged = mergeRootProps(
		mergeRootProps(internalProps, userClassStyle),
		userHtmlProps,
	);

	const Tag = dynamic(() => props.as ?? "div");
	return (
		<Tag {...merged}>
			<ToolbarGroupContext value={contextValue}>
				{props.children}
			</ToolbarGroupContext>
		</Tag>
	);
}