import type { JSX, ValidComponent } from "@solidjs/web";
import { dynamic } from "@solidjs/web";
import { omit, Show } from "solid-js";
import { mergeRootProps } from "../../internals/merge-root-props";
import { resolveClassStyle } from "../../internals/resolve-class-style";
import type {
	BaseUIComponentProps,
	NativeButtonProps,
} from "../../internals/types";
import { useButton } from "../../internals/use-button/use-button";
import { useToastRootContext } from "../root/toast-root-context";

export interface ToastActionState {
	type: string | undefined;
}

export interface ToastActionProps
	extends NativeButtonProps,
		BaseUIComponentProps<"button", ToastActionState> {
	/** Tag/component to render. Defaults to `"button"`. */
	as?: ValidComponent;
}

/**
 * Optional action button inside the toast.
 */
export function ToastAction(props: ToastActionProps): JSX.Element {
	const ctx = useToastRootContext();

	const disabled = (): boolean => Boolean(props.disabled);
	const nativeButton = (): boolean => props.nativeButton ?? true;

	const actionProps = (): Record<string, unknown> =>
		(ctx.toast().actionProps ?? {}) as Record<string, unknown>;

	const computedChildren = (): JSX.Element | undefined => {
		const ap = actionProps();
		return (ap.children as JSX.Element | undefined) ?? props.children;
	};

	const shouldRender = (): boolean => Boolean(computedChildren());

	const button = useButton({
		disabled,
		native: nativeButton,
	});
	const userClassStyle = resolveClassStyle(props, () => ({
		type: ctx.toast().type,
	}));

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

	const internalProps = {
		ref: button.ref,
		get "data-type"() {
			return ctx.toast().type;
		},
	};

	const merged = mergeRootProps(
		mergeRootProps(
			mergeRootProps(
				mergeRootProps(internalProps, button.props as Record<string, unknown>),
				actionProps() as Record<string, unknown>,
			),
			userClassStyle,
		),
		userHtmlProps,
	);

	const Tag = dynamic(() => props.as ?? "button");
	return (
		<Show when={shouldRender()}>
			<Tag {...merged}>{computedChildren()}</Tag>
		</Show>
	);
}