import type { JSX, ValidComponent } from "@solidjs/web";
import { dynamic } from "@solidjs/web";
import { createSignal, omit } 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 { useToastProviderContext } from "../provider/toast-provider-context";
import { useToastRootContext } from "../root/toast-root-context";

export interface ToastCloseState {
	type: string | undefined;
}

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

/**
 * Close button for the toast.
 */
export function ToastClose(props: ToastCloseProps): JSX.Element {
	const store = useToastProviderContext();
	const ctx = useToastRootContext();

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

	const button = useButton({
		disabled,
		native: nativeButton,
	});

	const [hasFocus, setHasFocus] = createSignal(false);
	const userClassStyle = resolveClassStyle(props, () => ({
		type: ctx.toast().type,
	}));

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

	const internalProps = {
		ref: button.ref,
		get "aria-hidden"() {
			return !ctx.expanded() && !hasFocus() ? "true" : undefined;
		},
		get "data-type"() {
			return ctx.toast().type;
		},
		onClick() {
			store.closeToast(ctx.toast().id);
		},
		onFocus() {
			setHasFocus(true);
		},
		onBlur() {
			setHasFocus(false);
		},
	};

	const merged = mergeRootProps(
		mergeRootProps(mergeRootProps(internalProps, button.props), userClassStyle),
		userHtmlProps,
	);

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