/*!
 * KoliBri - The accessible HTML-Standard
 */
import { __rest } from "tslib";
import { h } from "@stencil/core";
import { BaseWebComponent } from "../../internal/functional-components/base-web-component";
import { TooltipFC } from "../../internal/functional-components/tooltip/component";
import { TooltipController } from "../../internal/functional-components/tooltip/controller";
import { buildBadgeTextString, getMsgType, isMsgDefinedAndInputTouched, showExpertSlot } from "../../schema";
import clsx from "../../utils/clsx";
import { createRelatedUniqueId } from "../../utils/dev.utils";
import KolFormFieldCharacterLimitHintFc from "../FormFieldCharacterLimitHint/FormFieldCharacterLimitHint";
import KolFormFieldCounterFc from "../FormFieldCounter";
import KolFormFieldHintFc from "../FormFieldHint/FormFieldHint";
import KolFormFieldLabelFc from "../FormFieldLabel";
import KolFormFieldMsgFc from "../FormFieldMsg";
const formFieldTooltipControllerById = new Map();
const getFormFieldTooltipController = (id) => {
    const tooltipController = formFieldTooltipControllerById.get(id);
    if (tooltipController) {
        return tooltipController;
    }
    const nextTooltipController = new TooltipController(BaseWebComponent.stateLess);
    nextTooltipController.componentWillLoad({ label: '' });
    formFieldTooltipControllerById.set(id, nextTooltipController);
    return nextTooltipController;
};
const destroyFormFieldTooltipController = (id) => {
    const tooltipController = formFieldTooltipControllerById.get(id);
    if (tooltipController) {
        tooltipController.destroy();
        formFieldTooltipControllerById.delete(id);
    }
};
function getModifierClassNameByMsgType(msg) {
    if (msg === null || msg === void 0 ? void 0 : msg.type) {
        return ({
            default: 'msg-type-default',
            info: 'msg-type-info',
            success: 'msg-type-success',
            warning: 'msg-type-warning',
            error: 'msg-type-error',
        }[msg === null || msg === void 0 ? void 0 : msg.type] || '');
    }
    return '';
}
const InputContainer = (_a, children) => {
    var { class: classNames } = _a, other = __rest(_a, ["class"]);
    return (h("div", Object.assign({ class: clsx('kol-form-field__input', classNames) }, other), children));
};
const KolFormFieldFc = (props, children) => {
    const { component: Component = 'div', renderNoLabel, renderNoTooltip, renderNoHint, anotherChildren, id, required, alert, disabled, class: classNames, msg, hideMsg, hideLabel, label, hint, accessKey, shortKey, counter, readOnly, touched, maxLength, ariaDescribedBy, showBadge, tooltipAlign, tooltipFloatingRef, variant, formFieldLabelProps, formFieldHintProps, formFieldTooltipProps, formFieldMsgProps, formFieldInputProps } = props, other = __rest(props, ["component", "renderNoLabel", "renderNoTooltip", "renderNoHint", "anotherChildren", "id", "required", "alert", "disabled", "class", "msg", "hideMsg", "hideLabel", "label", "hint", "accessKey", "shortKey", "counter", "readOnly", "touched", "maxLength", "ariaDescribedBy", "showBadge", "tooltipAlign", "tooltipFloatingRef", "variant", "formFieldLabelProps", "formFieldHintProps", "formFieldTooltipProps", "formFieldMsgProps", "formFieldInputProps"]);
    const showLabel = !renderNoLabel;
    const showHint = !renderNoHint;
    const showTooltip = !renderNoTooltip;
    const hasExpertSlot = showExpertSlot(label);
    const showMsg = isMsgDefinedAndInputTouched(msg, touched);
    const badgeText = buildBadgeTextString(accessKey, shortKey);
    const useTooltipInsteadOfLabel = showTooltip && !hasExpertSlot && hideLabel;
    const labelId = createRelatedUniqueId(id, 'label');
    const tooltipController = useTooltipInsteadOfLabel ? getFormFieldTooltipController(id) : undefined;
    if (tooltipController) {
        tooltipController.watchAlign(tooltipAlign);
        tooltipController.watchBadgeText(badgeText || '');
        tooltipController.watchId(labelId);
        tooltipController.watchLabel(label);
    }
    else {
        destroyFormFieldTooltipController(id);
    }
    const forwardedInputRef = formFieldInputProps === null || formFieldInputProps === void 0 ? void 0 : formFieldInputProps.ref;
    const setInputContainerRef = (el) => {
        forwardedInputRef === null || forwardedInputRef === void 0 ? void 0 : forwardedInputRef(el);
        if (tooltipController && el) {
            tooltipController.initContext(el);
            tooltipController.syncListeners(undefined, el, true);
        }
    };
    let stateCssClasses = {
        ['kol-form-field--disabled']: Boolean(disabled),
        ['kol-form-field--required']: Boolean(required),
        ['kol-form-field--touched']: Boolean(touched),
        ['kol-form-field--hide-label']: Boolean(hideLabel),
        ['kol-form-field--read-only']: Boolean(readOnly),
        ['kol-form-field--hidden-msg']: Boolean(hideMsg),
    };
    if (variant) {
        stateCssClasses = Object.assign(Object.assign({}, stateCssClasses), { [`kol-form-field--${variant}`]: true });
    }
    if (showMsg) {
        const msgType = getMsgType(msg);
        stateCssClasses = Object.assign(Object.assign({}, stateCssClasses), { [`kol-form-field--${msgType}`]: true, [`kol-form-field--${getModifierClassNameByMsgType({ type: msgType })}`]: true });
    }
    return (h(Component, Object.assign({ class: clsx('kol-form-field', stateCssClasses, classNames), "aria-describedby": ariaDescribedBy }, other), showLabel && (h(KolFormFieldLabelFc, Object.assign({}, (formFieldLabelProps || {}), { id: id, hasExpertSlot: hasExpertSlot, hideLabel: hideLabel, label: label, accessKey: accessKey, shortKey: shortKey, readOnly: readOnly, showBadge: showBadge }))), h(InputContainer, Object.assign({}, formFieldInputProps, { ref: setInputContainerRef }), children, useTooltipInsteadOfLabel && hideLabel === true && (h("div", { class: clsx('kol-form-field__tooltip', formFieldTooltipProps === null || formFieldTooltipProps === void 0 ? void 0 : formFieldTooltipProps.class) }, h(TooltipFC, { badgeText: badgeText || '', label: label, align: tooltipAlign, id: labelId, refFloating: tooltipFloatingRef !== null && tooltipFloatingRef !== void 0 ? tooltipFloatingRef : ((el) => {
            tooltipController === null || tooltipController === void 0 ? void 0 : tooltipController.setTooltipElementRef(el);
        }) })))), counter ? h(KolFormFieldCounterFc, Object.assign({ id: id }, counter)) : null, maxLength ? h(KolFormFieldCharacterLimitHintFc, { id: id, maxLength: maxLength }) : null, showMsg && !hideMsg && h(KolFormFieldMsgFc, Object.assign({}, (formFieldMsgProps || {}), { id: id, alert: alert, msg: msg })), showHint && h(KolFormFieldHintFc, Object.assign({}, (formFieldHintProps || {}), { id: id, hint: hint })), anotherChildren));
};
export default KolFormFieldFc;
//# sourceMappingURL=FormField.js.map
