/**
 * @license MIT
 * author: Cube Dev Team
 * @cube-dev/ui-kit v0.0.0-canary-b46ab85
 * Released under the MIT license.
 */

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { IconAlertTriangleFilled, IconCircleCheckFilled, IconCircleXFilled, IconInfoCircleFilled, } from '@tabler/icons-react';
import { forwardRef, useMemo } from 'react';
import { CONTAINER_STYLES, extractStyles, filterBaseProps, tasty, } from '../../../tasty/index.js';
import { mergeProps, wrapNodeIfPlain } from '../../../utils/react/index.js';
import { Title } from '../Title.js';
const Container = tasty({
    qa: 'Result_Container',
    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: () => _jsx(IconCircleCheckFilled, {}),
    },
    error: {
        color: 'danger',
        component: () => _jsx(IconCircleXFilled, {}),
    },
    info: {
        color: 'purple',
        component: () => _jsx(IconInfoCircleFilled, {}),
    },
    warning: {
        color: 'warning',
        component: () => _jsx(IconAlertTriangleFilled, {}),
    },
    404: {
        color: 'purple',
        component: () => {
            // TODO: Needs to be implemented in the future
            return null;
        },
    },
    403: {
        color: 'purple',
        component: () => {
            // TODO: Needs to be implemented in the future
            return null;
        },
    },
    500: {
        color: 'purple',
        component: () => {
            // TODO: Needs to be implemented in the future
            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 (_jsx("div", { "data-element": "Icon", style: { color: `var(--${color}-color)` }, children: _jsx(Component, { "data-element": "Icon" }) }));
    }, [icon, status]);
    const styles = extractStyles(otherProps, CONTAINER_STYLES);
    return (_jsxs(Container, { ...mergeProps(filterBaseProps(otherProps, { eventProps: true }), {
            mods: { compact: isCompact },
        }), ref: ref, styles: styles, children: [iconNode, (title || subtitle) && (_jsxs("div", { "data-element": "Title", children: [wrapNodeIfPlain(title, () => (_jsx(Title, { level: 2, preset: isCompact ? 'h5' : 'h4', children: title }))), wrapNodeIfPlain(subtitle, () => (_jsx(Title, { level: 3, preset: isCompact ? 't3m' : 't2m', children: subtitle })))] })), children && _jsx("div", { "data-element": "Content", children: children })] }));
}
const _Result = forwardRef(Result);
_Result.displayName = 'Result';
export { _Result as Result };

        