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

import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { forwardRef } from 'react';
import { InfoCircleIcon } from '../../../icons/index.js';
import { tasty } from '../../../tasty/index.js';
import { mergeProps, wrapNodeIfPlain } from '../../../utils/react/index.js';
import { Item } from '../../content/Item/index.js';
import { Text } from '../../content/Text.js';
import { Flex } from '../../layout/Flex.js';
import { Space } from '../../layout/Space.js';
import { Label } from '../Label.js';
const FieldElement = tasty({
    qa: 'Field',
    styles: {
        display: 'grid',
        width: 'auto',
        gridColumns: {
            '': 'minmax(0, 1fr)',
            'has-sider': '($full-label-width, auto) minmax(0, 1fr)',
            'has-split': 'auto auto',
        },
        gap: 0,
        placeItems: {
            '': 'baseline stretch',
            'has-split': 'center',
        },
        placeContent: {
            '': 'initial',
            'has-split': 'space-between',
        },
        '$full-label-width': '($label-width + 1x)',
        LabelArea: {
            display: 'block',
            width: {
                '': 'initial',
                'has-sider': '$label-width',
            },
            margin: {
                '': '1x bottom',
                'has-sider': '1x right',
                'has-split': '1x right',
                ':empty': '0',
            },
        },
        InputArea: {
            display: 'block',
            flow: 'column',
            gap: '.5x',
            gridColumn: {
                '': 'initial',
                'has-sider': 2,
                'has-split': 2,
            },
        },
    },
});
if (process.env.NODE_ENV === 'development') {
    FieldElement.displayName = 'FieldWrapperElement';
}
const MessageElement = tasty({
    qa: 'Field_Message',
    styles: {
        preset: 't4',
        color: {
            '': '#dark-02',
            invalid: '#danger-text',
            valid: '#success-text',
            disabled: '#dark.40',
        },
        textAlign: 'left',
        userSelect: 'none',
    },
});
const DescriptionElement = tasty({
    qa: 'Field_Description',
    styles: {
        preset: 't4',
        color: '#dark-03',
        textAlign: 'left',
        userSelect: 'none',
    },
});
/**
 * A wrapper for form fields to provide additional decoration for inputs.
 * @internal Do not use this component directly.
 */
export const FieldWrapper = forwardRef(function FieldWrapper(props, ref) {
    const { as, labelPosition = 'top', label, extra, styles, isRequired, isDisabled, labelStyles, necessityIndicator, labelProps, fieldProps, message, messageStyles, description, errorMessage, Component, validationState, requiredMark = true, tooltip, isHidden, labelSuffix, children, } = props;
    const labelComponent = label ? (_jsx(Label, { as: as === 'label' ? 'div' : 'label', styles: labelStyles, labelPosition: labelPosition, isRequired: requiredMark ? isRequired : false, isDisabled: isDisabled, necessityIndicator: necessityIndicator, validationState: validationState, "aria-label": typeof label === 'string' ? label : undefined, ...labelProps, children: _jsxs(Flex, { placeContent: "baseline space-between", width: "100%", children: [_jsxs(Space, { placeItems: "center", gap: "0.75x", children: [_jsx("div", { children: label }), tooltip ? (_jsx(Item, { icon: _jsx(InfoCircleIcon, { color: "#purple-text" }), size: "inline", tooltip: typeof tooltip === 'string' ? tooltip : { title: tooltip } })) : null, labelSuffix ? _jsx("div", { children: labelSuffix }) : null] }), extra && _jsx(Text, { preset: "t3", children: extra })] }) })) : null;
    // Create description component with proper styling
    const createDescriptionComponent = () => {
        if (!description)
            return null;
        return (_jsx(DescriptionElement, { "data-element": "Description", children: wrapNodeIfPlain(description, () => (_jsx("span", { children: description }))) }));
    };
    // Description positioning based on label position
    const descriptionForLabel = labelPosition === 'side' || labelPosition === 'split'
        ? createDescriptionComponent()
        : null;
    const descriptionForInput = labelPosition === 'top' ? createDescriptionComponent() : null;
    const mods = {
        'has-sider': labelPosition === 'side',
        'has-split': labelPosition === 'split',
        'has-description': !!description,
        invalid: validationState === 'invalid',
        valid: validationState === 'valid',
    };
    // Determine which message to display (errorMessage takes precedence, then message for backward compatibility)
    const displayMessage = errorMessage || message;
    const isErrorMessage = !!errorMessage;
    // Merge fieldProps with styles to ensure both are applied
    const mergedFieldProps = styles
        ? mergeProps(fieldProps, { styles })
        : fieldProps;
    return (_jsxs(_Fragment, { children: [_jsxs(FieldElement, { ref: ref, as: as ?? 'div', mods: mods, isHidden: isHidden, ...mergedFieldProps, children: [labelComponent || descriptionForLabel ? (_jsxs("div", { "data-element": "LabelArea", children: [labelComponent, descriptionForLabel] })) : null, _jsxs("div", { "data-element": "InputArea", children: [Component, descriptionForInput, displayMessage && !isDisabled && (_jsx(MessageElement, { mods: {
                                    ...mods,
                                    // Force invalid state for errorMessage regardless of validationState
                                    invalid: isErrorMessage || validationState === 'invalid',
                                }, styles: messageStyles, role: isErrorMessage || validationState === 'invalid'
                                    ? 'alert'
                                    : undefined, children: displayMessage }))] })] }), children] }));
});

        