import { __assign, __rest } from "tslib";
import React, { useState, useEffect, useContext } from 'react';
import classNames from 'classnames';
import { ConfigContext } from '../config-provider/config-context';
import { getPrefixCls } from '../_utils/general';
import { PresetColors } from './types';
var Tag = function (props) {
    var _a;
    var _b = props.closable, closable = _b === void 0 ? false : _b, _c = props.defaultVisible, defaultVisible = _c === void 0 ? true : _c, customisedCls = props.prefixCls, color = props.color, onClose = props.onClose, onClick = props.onClick, className = props.className, style = props.style, children = props.children, otherProps = __rest(props, ["closable", "defaultVisible", "prefixCls", "color", "onClose", "onClick", "className", "style", "children"]);
    var _d = useState('visible' in props ? props.visible : defaultVisible), visible = _d[0], setVisible = _d[1];
    var configContext = useContext(ConfigContext);
    var prefixCls = getPrefixCls('tag', configContext.prefixCls, customisedCls);
    var cls = classNames(prefixCls, className, (_a = {},
        _a[prefixCls + "_" + color] = color && PresetColors.includes(color),
        _a[prefixCls + "_visible"] = visible,
        _a[prefixCls + "_closeable"] = closable,
        _a));
    var closeBtnOnClick = function (e) {
        onClose && onClose(e);
        if (e.defaultPrevented) {
            return;
        }
        !('visible' in props) && setVisible(false);
    };
    var tagStyle = __assign({ backgroundColor: color ? (PresetColors.includes(color) ? undefined : color) : undefined, borderColor: color ? (PresetColors.includes(color) ? undefined : color) : undefined, color: color ? (PresetColors.includes(color) ? undefined : '#fff') : undefined }, style);
    useEffect(function () {
        'visible' in props && setVisible(props.visible);
    }, [props]);
    return (React.createElement("div", __assign({}, otherProps, { className: cls, style: tagStyle, onClick: onClick }),
        children,
        closable && (React.createElement("span", { className: prefixCls + "__close-btn", onClick: closeBtnOnClick }, "\u2715"))));
};
Tag.displayName = 'Tag';
export default Tag;
//# sourceMappingURL=tag.js.map