import { jsx, jsxs } from "react/jsx-runtime";
import { useContext } from "react";
import { css } from "@emotion/css";
import { Button } from "antd";
import classnames from "classnames";
import { useNavigate } from "react-router";
import { useLocation } from "react-router-dom";
import { Icon } from "../../icon/index.mjs";
import { PageStyleContext } from "./PageStyle.provider.mjs";
import { useStyles } 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 } = useStyles();
    return /*#__PURE__*/ jsxs("span", {
        onClick: onClick,
        className: classnames(styles.tabHeader, {
            active
        }),
        children: [
            /*#__PURE__*/ jsx("span", {
                className: "tab-text",
                children: children
            }),
            /*#__PURE__*/ jsx(Button, {
                className: css(_templateObject()),
                type: "text",
                onClick: onClose,
                icon: /*#__PURE__*/ jsx(Icon, {
                    type: "CloseOutlined"
                })
            })
        ]
    });
};
const TabHeader = ()=>{
    const navigate = useNavigate();
    const location = useLocation();
    const { items, setItems } = useContext(PageStyleContext);
    const targetKey = location.pathname;
    const { styles } = useStyles();
    return /*#__PURE__*/ jsx("div", {
        className: styles.tabWrapper,
        children: items.map((item)=>/*#__PURE__*/ 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 };
