import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import clsx from "clsx";
import { IconButton, RangeComponent, TextPillNotClickable } from "..";
import { convertTo10KFormat } from "../../utils";
import EllipsisText from "../EllipsisText";
import "./style.scss";
const AdvanceFilterTitleWindow = ({ setMaxValue = 500, setMinValue = 200, searchForPillText = "Cheif Executive Officer", crossOnClick, applyToAllOnClick, showApplyToAllButton = true, getRange = () => { }, onSelectClick = () => { }, isSelected = false, }) => {
    const textPillClassName = clsx({
        textPillButton: true,
        textPillButtonSelected: isSelected,
        textPillButtonUnselected: !isSelected,
    });
    return (_jsx("div", { style: { width: "100%" }, children: _jsxs("div", { className: "advanceFilterJobTitleWindow", children: [_jsx("div", { className: "textPillWrapper", children: _jsx("button", { onClick: onSelectClick, className: textPillClassName, children: _jsx(EllipsisText, { className: "textPill", maxWidth: "160px", children: searchForPillText }) }) }), _jsx(RangeComponent, { minValue: setMinValue, maxValue: setMaxValue, getRange: (value) => {
                        getRange(value);
                    } }), _jsx("div", { className: "rangePill", children: _jsx(TextPillNotClickable, { text: `${convertTo10KFormat(setMinValue)}-${convertTo10KFormat(setMaxValue)}`, sizeVariant: "sm", isSelected: isSelected, hasBorder: true }) }), _jsx(IconButton, { shape: "circular", onClick: crossOnClick, sizeVariant: "xs", color: "gray", variant: "tertiary", iconType: "cross" }), showApplyToAllButton && (_jsx("button", { className: "applyToAllButton", onClick: () => {
                        applyToAllOnClick({
                            minRange: setMinValue,
                            maxRange: setMaxValue,
                        });
                    }, children: "Apply to all" }))] }) }));
};
//
export default AdvanceFilterTitleWindow;
