import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
// import {Tabs} from "qlu-20-ui-library";
import "./style.scss";
import Tabs from "../Tabs";
import { GetSvgIcon } from "..";
import { useState } from "react";
const TagButtonComponent = ({ tabs, handleChange, styleableTags, tagClasses, }) => {
    if (tabs.length === 0) {
        return null;
    }
    const [selectedTab, setSelectedTab] = useState(tabs[0].tabName);
    const TagButton = ({ cursorPos, name, skillFlag = false, }) => {
        const message = "";
        const tagName = skillFlag ? name : name.split(" ").join("_");
        const handleClick = (e) => {
            e.preventDefault();
            if (styleableTags && !skillFlag) {
                handleChange(`{{.${tagName}}}`);
            }
            else if (skillFlag) {
                handleChange(tagName);
            }
            else {
                const value = message.slice(0, cursorPos) +
                    `${skillFlag ? tagName : `{{.${tagName}}}`}` +
                    message.slice(cursorPos);
                handleChange(value);
            }
        };
        return (_jsxs("button", { className: "tags", onMouseDown: handleClick, children: [_jsx("p", { className: "tagButtonComponent-TagText", children: name }), _jsx(GetSvgIcon, { iconType: "plus", iconSize: "16" })] }));
    };
    const renderedTabs = tabs.map((tab, index) => {
        return {
            id: index.toString(),
            title: tab.tabName,
            content: (_jsx("div", { className: `tagContainer ${tagClasses ? tagClasses : ""}`, children: tab.tabList.map((tag) => (_jsx(TagButton, { cursorPos: undefined, name: tag.tagName }))) })),
        };
    });
    const getSelectedTabContent = (selectedTab) => {
        return renderedTabs.find((tab) => tab.title === selectedTab)?.content;
    };
    const tabsPayload = renderedTabs.map((tab) => ({
        id: tab.id,
        title: tab.title,
    }));
    const onTabClick = (tab) => setSelectedTab(tab);
    return (_jsx("div", { className: "tabContainer", children: _jsx(Tabs, { tabs: tabsPayload, onSelect: onTabClick, selectedTab: selectedTab, children: getSelectedTabContent(selectedTab) }) }));
};
export default TagButtonComponent;
