import React, { useRef, useState } from "react";
import cx from "classnames";
import { useOutsideClick } from "../../../../hooks";
import { HintWrapper, Indicator, IndicatorWrapper, Label, OptionalText } from "../../InformationWrapper.styles";
import { HintComponent } from "../Hint/Hint";
import { classes } from "../../InformationWrapper.tokens";
export const LabelComponent = ({ size, hasRequiredIndicator, requiredIndicatorPlacement, optional, optionalText, label, labelHtmlFor, titleCaption, hintText, hintTrigger, hintTargetIcon, hintPlacement, hintHasArrow, hintOffset, hintWidth, hintContentLeft, disabled })=>{
    const [isHintVisible, setIsHintVisible] = useState(false);
    const hintRef = useRef(null);
    useOutsideClick(()=>{
        setIsHintVisible(false);
    }, [
        hintRef
    ]);
    const innerOptional = Boolean(hasRequiredIndicator ? false : optional);
    const requiredPlacementClass = requiredIndicatorPlacement === 'left' ? classes.requiredAlignLeft : undefined;
    const handleHintShow = ()=>{
        if (disabled) {
            return;
        }
        setIsHintVisible(true);
    };
    const handleHintHide = ()=>setIsHintVisible(false);
    const handleHintClick = (event)=>{
        if (!hintText || hintTrigger !== 'click' || disabled) {
            return;
        }
        event.stopPropagation();
        const targetIsPopover = event.target === hintRef.current;
        const rootHasTarget = hintRef.current?.contains(event.target);
        if (!targetIsPopover && !rootHasTarget) {
            setIsHintVisible(true);
        }
    };
    return /*#__PURE__*/ React.createElement(IndicatorWrapper, {
        hasLabel: Boolean(label)
    }, /*#__PURE__*/ React.createElement(Label, {
        htmlFor: labelHtmlFor
    }, label), hintText && /*#__PURE__*/ React.createElement(HintWrapper, {
        className: cx({
            [classes.withoutLabel]: !label
        }),
        hasCaption: Boolean(titleCaption)
    }, /*#__PURE__*/ React.createElement(HintComponent, {
        ref: hintRef,
        size: size,
        hintText: hintText,
        hintTrigger: hintTrigger,
        isHintVisible: isHintVisible,
        hintTargetIcon: hintTargetIcon,
        hintPlacement: hintPlacement,
        hintHasArrow: hintHasArrow,
        hintOffset: hintOffset,
        hintWidth: hintWidth,
        hintContentLeft: hintContentLeft,
        withoutLabel: !label,
        handleHintShow: handleHintShow,
        handleHintHide: handleHintHide,
        handleHintClick: handleHintClick
    })), hasRequiredIndicator && /*#__PURE__*/ React.createElement(Indicator, {
        className: cx(requiredPlacementClass, {
            [classes.withoutLabel]: !label
        }),
        hasCaption: Boolean(titleCaption)
    }), innerOptional && /*#__PURE__*/ React.createElement(OptionalText, null, optionalText));
};
