/** @license MIT | @cube-dev/ui-kit v0.123.0 | Cube Dev Team */
import { extractStyles } from "../../../utils/styles.js";
import { mergeProps } from "../../../utils/react/mergeProps.js";
import { wrapNodeIfPlain } from "../../../utils/react/wrapNodeIfPlain.js";
import { _Title } from "../Title.js";
import { CONTAINER_STYLES, filterBaseProps, tasty } from "@tenphi/tasty";
import { forwardRef, useMemo } from "react";
import { jsx, jsxs } from "react/jsx-runtime";
import { IconAlertTriangleFilled, IconCircleCheckFilled, IconCircleXFilled, IconInfoCircleFilled } from "@tabler/icons-react";

//#region src/components/content/Result/Result.tsx
const Container = tasty({
	qa: "ResultContainer",
	as: "section",
	styles: {
		display: {
			"": "flex",
			compact: "grid"
		},
		gridAreas: "\"icon title\" \"content content\"",
		flow: "column",
		placeContent: {
			"": "center",
			compact: "start"
		},
		placeItems: {
			"": "center",
			compact: "start"
		},
		gap: {
			"": "3x",
			compact: "2x 1x"
		},
		padding: {
			"": "6x 4x",
			compact: "0"
		},
		textAlign: {
			"": "center",
			compact: "left"
		},
		"--icon-size": "6x",
		Icon: {
			$: ">",
			display: "grid",
			gridArea: "icon"
		},
		Content: {
			$: ">",
			gridArea: "content",
			display: "block"
		},
		Title: {
			$: ">",
			gridArea: "title",
			display: "flex",
			flow: "column",
			placeItems: "inherit",
			gap: "1x",
			placeSelf: "center"
		}
	}
});
const statusIconMap = {
	success: {
		color: "success",
		component: () => /* @__PURE__ */ jsx(IconCircleCheckFilled, {})
	},
	error: {
		color: "danger",
		component: () => /* @__PURE__ */ jsx(IconCircleXFilled, {})
	},
	info: {
		color: "purple",
		component: () => /* @__PURE__ */ jsx(IconInfoCircleFilled, {})
	},
	warning: {
		color: "warning",
		component: () => /* @__PURE__ */ jsx(IconAlertTriangleFilled, {})
	},
	404: {
		color: "purple",
		component: () => {
			return null;
		}
	},
	403: {
		color: "purple",
		component: () => {
			return null;
		}
	},
	500: {
		color: "purple",
		component: () => {
			return null;
		}
	}
};
function Result(props, ref) {
	let { children, isCompact, icon, status, subTitle, subtitle, title, ...otherProps } = props;
	subtitle = subtitle ?? subTitle;
	if (icon && status) console.warn("Don't use \"icon\" and \"status\" together, it can lead to possible errors.");
	const iconNode = useMemo(() => {
		if (icon) return icon;
		const { color, component: Component } = status && statusIconMap.hasOwnProperty(status) ? statusIconMap[status] : statusIconMap.info;
		return /* @__PURE__ */ jsx("div", {
			"data-element": "Icon",
			style: { color: `var(--${color}-color)` },
			children: /* @__PURE__ */ jsx(Component, { "data-element": "Icon" })
		});
	}, [icon, status]);
	const styles = extractStyles(otherProps, CONTAINER_STYLES);
	return /* @__PURE__ */ jsxs(Container, {
		...mergeProps(filterBaseProps(otherProps, { eventProps: true }), { mods: { compact: isCompact } }),
		ref,
		styles,
		children: [
			iconNode,
			(title || subtitle) && /* @__PURE__ */ jsxs("div", {
				"data-element": "Title",
				children: [wrapNodeIfPlain(title, () => /* @__PURE__ */ jsx(_Title, {
					level: 2,
					preset: isCompact ? "h5" : "h4",
					children: title
				})), wrapNodeIfPlain(subtitle, () => /* @__PURE__ */ jsx(_Title, {
					level: 3,
					preset: isCompact ? "t3m" : "t2m",
					children: subtitle
				}))]
			}),
			children && /* @__PURE__ */ jsx("div", {
				"data-element": "Content",
				children
			})
		]
	});
}
const _Result = forwardRef(Result);
_Result.displayName = "Result";

//#endregion
export { _Result };
//# sourceMappingURL=Result.js.map