import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime__ from "react/jsx-runtime";
import * as __WEBPACK_EXTERNAL_MODULE_react__ from "react";
import * as __WEBPACK_EXTERNAL_MODULE__emotion_css__ from "@emotion/css";
import * as __WEBPACK_EXTERNAL_MODULE_antd__ from "antd";
import * as __WEBPACK_EXTERNAL_MODULE_classnames__ from "classnames";
import * as __WEBPACK_EXTERNAL_MODULE_react_router__ from "react-router";
import * as __WEBPACK_EXTERNAL_MODULE_react_router_dom__ from "react-router-dom";
import * as __WEBPACK_EXTERNAL_MODULE__icon_index_mjs__ from "../../icon/index.mjs";
import * as __WEBPACK_EXTERNAL_MODULE__PageStyle_provider_mjs__ from "./PageStyle.provider.mjs";
function _tagged_template_literal(strings, raw) {
    if (!raw) raw = strings.slice(0);
    return Object.freeze(Object.defineProperties(strings, {
        raw: {
            value: Object.freeze(raw)
        }
    }));
}
function _templateObject() {
    const data = _tagged_template_literal([
        "\n          margin: 6px 2px;\n          align-items: center;\n          background-image: none;\n          background: rgba(0, 0, 0, 0.04);\n          border-radius: 6px;\n          border: 1px solid transparent;\n          color: rgba(255, 255, 255, 0.88);\n          cursor: pointer;\n          display: inline-flex;\n          font-size: 14px;\n          font-weight: 400;\n          gap: 8px;\n          height: 32px;\n          justify-content: center;\n          line-height: 1.5714285714285714;\n          outline: none;\n          padding: 4px 15px;\n          position: relative;\n          text-align: center;\n          touch-action: manipulation;\n          transition: all 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);\n          user-select: none;\n          white-space: nowrap;\n        "
    ]);
    _templateObject = function() {
        return data;
    };
    return data;
}
function _templateObject1() {
    const data = _tagged_template_literal([
        "\n              background: transparent;\n            "
    ]);
    _templateObject1 = function() {
        return data;
    };
    return data;
}
function _templateObject2() {
    const data = _tagged_template_literal([
        "\n          color: rgba(255, 255, 255, 0.88);\n        "
    ]);
    _templateObject2 = function() {
        return data;
    };
    return data;
}
const Tag = (param)=>{
    let { onClick, onClose, children, active } = param;
    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime__.jsxs)("span", {
        onClick: onClick,
        className: (0, __WEBPACK_EXTERNAL_MODULE_classnames__["default"])((0, __WEBPACK_EXTERNAL_MODULE__emotion_css__.css)(_templateObject()), active ? '' : (0, __WEBPACK_EXTERNAL_MODULE__emotion_css__.css)(_templateObject1())),
        children: [
            children,
            /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime__.jsx)(__WEBPACK_EXTERNAL_MODULE_antd__.Button, {
                className: (0, __WEBPACK_EXTERNAL_MODULE__emotion_css__.css)(_templateObject2()),
                type: "text",
                onClick: onClose,
                icon: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime__.jsx)(__WEBPACK_EXTERNAL_MODULE__icon_index_mjs__.Icon, {
                    type: "CloseOutlined"
                })
            })
        ]
    });
};
const TabHeader = ()=>{
    const navigate = (0, __WEBPACK_EXTERNAL_MODULE_react_router__.useNavigate)();
    const location = (0, __WEBPACK_EXTERNAL_MODULE_react_router_dom__.useLocation)();
    const { items, setItems } = (0, __WEBPACK_EXTERNAL_MODULE_react__.useContext)(__WEBPACK_EXTERNAL_MODULE__PageStyle_provider_mjs__.PageStyleContext);
    const targetKey = location.pathname;
    return items.map((item)=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime__.jsx)(Tag, {
            active: item.key === targetKey,
            onClick: ()=>{
                navigate(item.key);
            },
            onClose: (e)=>{
                e.stopPropagation();
                setItems((items)=>items.filter((i)=>i.key !== item.key));
            },
            children: item.label
        }, item.key));
};
export { TabHeader, Tag };
