/* @oracle/oraclejet-preact: undefined */
'use strict';

var jsxRuntime = require('preact/jsx-runtime');
var classNames = require('./classNames-c14c6ef3.js');
require('./FormContext-9452bd30.js');
var useFormContext = require('./useFormContext-4c3091dc.js');
require('./FormFieldContext-8418dc68.js');
var useFormFieldContext = require('./useFormFieldContext-20f419ef.js');
var size = require('./size-0056ef1a.js');
var StyledLabelValueLayout = require('./StyledLabelValueLayout-5198483a.js');
var useComponentTheme = require('./useComponentTheme-082fc8e4.js');
var UNSAFE_TextField_themes_redwood_TextFieldTheme = require('./UNSAFE_TextField/themes/redwood/TextFieldTheme.js');
var UNSAFE_Label_themes_redwood_LabelTheme = require('./UNSAFE_Label/themes/redwood/LabelTheme.js');
var UNSAFE_TextField_themes_redwood_FormLayoutTheme = require('./UNSAFE_TextField/themes/redwood/FormLayoutTheme.js');

/**
 * A layout component for rendering a label and value pair, used in form components
 * such as TextField, TextArea, and FormComponentWrapper.
 */
const LabelValueLayout = ({ label, labelEdge, children, labelStartWidth = '33%', parentComponentVariant = 'textField', ...rest }) => {
    const { baseTheme: textFieldTheme } = useComponentTheme.useComponentTheme(UNSAFE_TextField_themes_redwood_TextFieldTheme.TextFieldRedwoodTheme);
    const { baseTheme: labelTheme } = useComponentTheme.useComponentTheme(UNSAFE_Label_themes_redwood_LabelTheme.LabelRedwoodTheme);
    const { baseTheme: formLayoutTheme } = useComponentTheme.useComponentTheme(UNSAFE_TextField_themes_redwood_FormLayoutTheme.FormLayoutRedwoodTheme);
    const isTextField = parentComponentVariant.startsWith('text');
    const isFormComponentWrapper = parentComponentVariant === 'formComponentWrapper';
    const isStart = labelEdge === 'start';
    const isTop = labelEdge === 'top' || labelEdge === 'inside'; // 'inside' needs to pick up all 'top' styles.
    const isInside = labelEdge === 'inside';
    const width = size.sizeToCSS(labelStartWidth);
    const valueWidth = `calc(100% - ${width})`;
    const hasTopUserAssistance = !!rest.hasTopUserAssistance;
    const labelStyles = isStart
        ? { flexBasis: width, width: width, maxWidth: width }
        : {};
    const valueStyles = isStart
        ? { flexBasis: valueWidth, width: valueWidth, maxWidth: valueWidth }
        : {};
    const { isFormLayout, isReadonly: isFormReadonly, labelWrapping } = useFormContext.useFormContext();
    const { isReadonly } = useFormFieldContext.useFormFieldContext();
    const isPureReadonly = (isFormLayout && isFormReadonly) || (!isFormLayout && isReadonly);
    const labelStyleClasses = classNames.classNames([
        formLayoutTheme,
        StyledLabelValueLayout.labelSlotStyles.base,
        isStart && StyledLabelValueLayout.labelSlotStyles.start,
        isTop && StyledLabelValueLayout.labelSlotStyles.top,
        isTop && hasTopUserAssistance && StyledLabelValueLayout.labelSlotStyles.topAndTopUA,
        isTop && isPureReadonly && StyledLabelValueLayout.labelSlotStyles.topPureReadonly
    ]);
    const labelInnerClasses = classNames.classNames([
        isTextField && textFieldTheme,
        isFormComponentWrapper && labelTheme,
        formLayoutTheme,
        StyledLabelValueLayout.labelInnerStyles.base,
        isStart && StyledLabelValueLayout.labelInnerStyles.start,
        isTextField && isStart && !isPureReadonly && StyledLabelValueLayout.labelInnerStyles.startNotPureReadonly,
        isFormComponentWrapper && isInside && StyledLabelValueLayout.labelInnerStyles.insideFormComponentWrapper,
        // Form Component Wrapper
        isFormComponentWrapper &&
            isStart &&
            !isPureReadonly &&
            !hasTopUserAssistance &&
            StyledLabelValueLayout.labelInnerStyles.startWithoutTopFormComponentWrapperUA,
        labelWrapping === 'truncate' && StyledLabelValueLayout.labelInnerStyles.noWrap
    ]);
    return (jsxRuntime.jsx(StyledLabelValueLayout.StyledLabelValueLayout
    // For readonly start aligned labels, we want the div that is the parent of the label to
    // stretch to the height of the value content, including the end content (InputSensitiveText)
    , { 
        // For readonly start aligned labels, we want the div that is the parent of the label to
        // stretch to the height of the value content, including the end content (InputSensitiveText)
        flexAlign: isReadonly && isStart ? 'stretch' : 'start', labelStyleClasses: labelStyleClasses, labelStyles: labelStyles, labelInnerClasses: labelInnerClasses, label: label, valueStyles: valueStyles, children: children }));
};

exports.LabelValueLayout = LabelValueLayout;
//# sourceMappingURL=LabelValueLayout-6b9232f5.js.map
