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";
import * as __WEBPACK_EXTERNAL_MODULE__TabHeader_style_mjs__ from "./TabHeader.style.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          color: rgba(255, 255, 255, 0.88);\n        "
    ]);
    _templateObject = function() {
        return data;
    };
    return data;
}
const Tag = (param)=>{
    let { onClick, onClose, children, active } = param;
    const { styles } = (0, __WEBPACK_EXTERNAL_MODULE__TabHeader_style_mjs__.useStyles)();
    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime__.jsxs)("span", {
        onClick: onClick,
        className: (0, __WEBPACK_EXTERNAL_MODULE_classnames__["default"])(styles.tabHeader, {
            active
        }),
        children: [
            /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime__.jsx)("span", {
                className: "tab-text",
                children: children
            }),
            /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime__.jsx)(__WEBPACK_EXTERNAL_MODULE_antd__.Button, {
                className: (0, __WEBPACK_EXTERNAL_MODULE__emotion_css__.css)(_templateObject()),
                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;
    const { styles } = (0, __WEBPACK_EXTERNAL_MODULE__TabHeader_style_mjs__.useStyles)();
    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime__.jsx)("div", {
        className: styles.tabWrapper,
        children: 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 };
