import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { forwardRef } from 'react';
import { CrossSmOutlineSm } from '../../icons/CrossSmOutlineSm';
import { Typography } from '../Typography';
import { tagClassnames } from './constants';
import { getBadgeColor, IconWrapper, Label, LabelContainer, LabelWrapper, StyledIconButton, Wrapper, } from './styles';
import { TagContextProvider } from './TagContext';
import { useLogic } from './useLogic';
export const Tag = forwardRef(({ onDelete, color = 'grey', variant = 'contained', size = 'small', label, startAddon, endAddon, disabled, icon, className, ...restProps }, ref) => {
    const { handleDelete, classnames } = useLogic({
        onDelete,
        size,
        variant,
        disabled,
        className,
    });
    const labelContent = (_jsxs(LabelContainer, { container: true, component: "span", spacing: 1, className: tagClassnames.label, "$variant": variant, children: [startAddon?.({
                color: getBadgeColor({
                    tagColor: color,
                }),
            }), _jsx(Typography, { component: LabelWrapper, children: label }), endAddon?.({
                color: getBadgeColor({
                    tagColor: color,
                }),
            })] }));
    return (_jsx(TagContextProvider, { variant: variant, children: _jsxs(Wrapper, { ref: ref, "$size": size, "$color": color, "$variant": variant, "$isDisabled": disabled, "$isRemovable": Boolean(onDelete), className: classnames, ...restProps, children: [icon && (_jsx(IconWrapper, { className: tagClassnames.icon, children: icon })), _jsx(Typography, { variant: "body1", component: Label, children: labelContent }), onDelete && !disabled && (_jsx(StyledIconButton, { onClick: handleDelete, "$color": color, "$variant": variant, "$size": size, "aria-label": "\u0423\u0434\u0430\u043B\u0438\u0442\u044C \u044D\u043B\u0435\u043C\u0435\u043D\u0442", children: _jsx(CrossSmOutlineSm, {}) }))] }) }));
});
