import { __assign } from '../../../node_modules/tslib/tslib.es6.js';
import React from 'react';
import { ButtonGroup, Button, chakra, IconButton } from '@chakra-ui/react';
import '../../icons/AdvancedSearchIcon.js';
import '../../icons/AiSearchIcon.js';
import '../../icons/ArrowCircleIcon.js';
import '../../icons/ArrowDiagonalIcon.js';
import '../../icons/ArrowDownIcon.js';
import '../../icons/ArrowLeftIcon.js';
import '../../icons/ArrowRightIcon.js';
import '../../icons/ArrowUpIcon.js';
import '../../icons/AutoScout24AppLogo.js';
import '../../icons/AvatarIcon.js';
import '../../icons/AvatarWithNotificationIcon.js';
import '../../icons/BatteryIcon.js';
import '../../icons/BookmarkIcon.js';
import '../../icons/CalculatorIcon.js';
import '../../icons/CalendarIcon.js';
import '../../icons/CallIcon.js';
import '../../icons/CamperIcon.js';
import '../../icons/CarConditionIcon.js';
import '../../icons/CarIcon.js';
import '../../icons/CopyIcon.js';
import '../../icons/ChartIcon.js';
import '../../icons/CheckmarkIcon.js';
import '../../icons/CheckmarkCircleIcon.js';
import '../../icons/CheckShieldIcon.js';
import '../../icons/ChevronDownLargeIcon.js';
import '../../icons/ChevronDownSmallIcon.js';
import '../../icons/ChevronLeftLargeIcon.js';
import '../../icons/ChevronLeftSmallIcon.js';
import '../../icons/ChevronRightLargeIcon.js';
import { ChevronRightSmallIcon } from '../../icons/ChevronRightSmallIcon.js';
import '../../icons/ChevronRightTinyIcon.js';
import '../../icons/ChevronUpLargeIcon.js';
import '../../icons/ChevronUpSmallIcon.js';
import { CloseIcon } from '../../icons/CloseIcon.js';
import '../../icons/CompareIcon.js';
import '../../icons/ConsumptionIcon.js';
import '../../icons/CreditIcon.js';
import '../../icons/CreditCardIcon.js';
import '../../icons/DaylightIcon.js';
import { DeleteIcon } from '../../icons/DeleteIcon.js';
import '../../icons/DocumentCheckIcon.js';
import '../../icons/DocumentIcon.js';
import '../../icons/DragIcon.js';
import '../../icons/DriveSystemIcon.js';
import '../../icons/DriveTypeIcon.js';
import '../../icons/EquipmentIcon.js';
import '../../icons/ErrorIcon.js';
import '../../icons/ExchangeIcon.js';
import '../../icons/EyeIcon.js';
import '../../icons/EyeCrossedIcon.js';
import '../../icons/FacebookIcon.js';
import '../../icons/FlagIcon.js';
import '../../icons/FlameIcon.js';
import '../../icons/FlashIcon.js';
import '../../icons/GasStationIcon.js';
import '../../icons/HeartIcon.js';
import '../../icons/HistoryClockIcon.js';
import '../../icons/HouseIcon.js';
import '../../icons/ImageIcon.js';
import '../../icons/InfoIcon.js';
import '../../icons/InstagramIcon.js';
import '../../icons/InteriorIcon.js';
import '../../icons/LinkedinIcon.js';
import '../../icons/LinkIcon.js';
import '../../icons/ListIcon.js';
import '../../icons/LocationPinIcon.js';
import '../../icons/MagnifierIcon.js';
import '../../icons/MessageIcon.js';
import '../../icons/MissingImageIcon.js';
import '../../icons/MotorcycleIcon.js';
import '../../icons/MotoScout24AppLogo.js';
import '../../icons/PdfIcon.js';
import '../../icons/PhoneIcon.js';
import '../../icons/PenIcon.js';
import '../../icons/PlusIcon.js';
import '../../icons/ChfCurrencyIcon.js';
import '../../icons/PrintIcon.js';
import '../../icons/RangeIcon.js';
import '../../icons/RoadIcon.js';
import '../../icons/RotateIcon.js';
import '../../icons/SafeNumberIcon.js';
import '../../icons/ShareIcon.js';
import '../../icons/StarIcon.js';
import '../../icons/SteeringWheelIcon.js';
import '../../icons/ThreeSixtyIcon.js';
import '../../icons/TimeIcon.js';
import '../../icons/TooltipIcon.js';
import '../../icons/InformationIcon.js';
import '../../icons/TopListingIcon.js';
import '../../icons/TrailerIcon.js';
import '../../icons/TransmissionIcon.js';
import '../../icons/TransparentLockIcon.js';
import '../../icons/Trash.js';
import '../../icons/TruckIcon.js';
import '../../icons/TwitterIcon.js';
import '../../icons/UtilityVehicleIcon.js';
import '../../icons/VehiclePowerIcon.js';
import '../../icons/VehicleTypesMotorcycleIcon.js';
import '../../icons/VideoIcon.js';
import '../../icons/VideoCameraIcon.js';
import '../../icons/ViewCarIcon.js';
import '../../icons/DriveSystemLargeIcon.js';
import '../../icons/WarningIcon.js';
import '../../icons/WhatsAppIcon.js';
import '../../icons/YoutubeIcon.js';
import '../../icons/SortIcon.js';
import '../../icons/ViewMotorcycleIcon.js';
import '../../icons/GoogleIcon.js';
import '../../icons/SaveSearchIcon.js';
import '../../icons/AutoScout24Icon.js';
import '../../icons/MotoScout24Icon.js';
import '../../icons/MagnifierLargeIcon.js';
import '../../icons/RocketIcon.js';
import '../../icons/CartIcon.js';
import '../../icons/VanIcon.js';
import '../../icons/MiniVanIcon.js';
import '../../icons/SuvIcon.js';
import '../../icons/CoupeIcon.js';
import '../../icons/CabrioletIcon.js';
import '../../icons/SmallCarIcon.js';
import '../../icons/SedanIcon.js';
import '../../icons/WagonIcon.js';
import '../../icons/PickUpIcon.js';
import '../../icons/InformationBubbleIcon.js';
import '../../icons/OverflowVerticalIcon.js';
import '../../icons/PartialClockIcon.js';
import '../../icons/LockIcon.js';
import '../../icons/TiltedRectangleIcon.js';
import '../../icons/PlusCircleIcon.js';
import '../../icons/StarCircleIcon.js';
import '../../icons/InfinityCircleIcon.js';
import '../../icons/VehicleTypesMotorcycleStarIcon.js';
import '../../icons/CategoryAOneIcon.js';
import '../../icons/CategoryAIcon.js';
import '../../icons/CategoryAMinusIcon.js';
import '../../icons/BankNotesIcon.js';
import '../../icons/ChatBubbleIcon.js';
import '../../icons/DigitalContractIcon.js';
import '../../icons/OptimizerIcon.js';
import '../../icons/CheckmarkCircleColorIcon.js';
import '../../icons/ArrowDownCircleIcon.js';
import '../../icons/ArrowUpCircleIcon.js';
import '../../icons/NotAvailableIcon.js';
import '../../icons/LabelIcon.js';
import '../../icons/BulbIcon.js';
import '../../icons/NoPhotoIcon.js';
import '../../icons/ThumbsUpIcon.js';
import '../../icons/ThumbsDownIcon.js';
import '../../icons/MinusIcon.js';
import '../../icons/DoubleChevronUpIcon.js';
import '../../icons/DoubleChevronDownIcon.js';
import '../../icons/DoubleLineIcon.js';
import '../../icons/NotAvailableSquareIcon.js';
import '../../icons/WarrantyIcon.js';
import '../../icons/DownloadIcon.js';
import '../../icons/TriangleIcon.js';
import '../../icons/SwissFlagIcon.js';
import '../../icons/GlobeIcon.js';
import '../../icons/GarageIcon.js';
import '../../icons/HamburgerMenuIcon.js';
import '../../icons/LogoutIcon.js';
import '../../icons/AndroidIcon.js';
import '../../icons/AppleIcon.js';
import '../../icons/WindowsIcon.js';
import '../../icons/SpeakerIcon.js';
import '../../icons/AddPhotoIcon.js';
import '../../icons/ScreenIcon.js';
import '../../icons/QualitySealIcon.js';
import '../../icons/ExpandIcon.js';
import '../../icons/CollapseIcon.js';
import '../../icons/ForwardIcon.js';
import '../../icons/BalanceIcon.js';
import '../../icons/ParagraphIcon.js';
import '../../icons/UploadIcon.js';

var heightFromVariant = {
    sm: 'md',
    md: 'lg',
};
var disabledColor = 'gray.300';
var getColor = function (isDisabled, color) {
    if (isDisabled)
        return disabledColor;
    return color;
};
var getResetButtonConfig = function (displayType, iconColor, paddingX) {
    if (displayType === 'inline') {
        return {
            icon: React.createElement(CloseIcon, { color: iconColor, w: "xs", h: "xs" }),
            w: 'md',
            minW: 'md',
            borderLeftColor: 'white',
            borderLeftWidth: '1px',
        };
    }
    return {
        icon: React.createElement(DeleteIcon, { color: iconColor }),
        paddingRight: paddingX,
    };
};
var getMainButtonRightPadding = function (shouldDisplayResetButton, displayType, paddingX) {
    if (!shouldDisplayResetButton)
        return paddingX;
    return displayType === 'inline' ? 'md' : 'sm';
};
var getChevronIconSize = function (displayType) {
    return displayType === 'inline' ? { w: 'xs', h: 'xs' } : { w: 'sm', h: 'sm' };
};
var getRightIcon = function (shouldDisplayResetButton, iconColor, chevronIconSize) {
    if (shouldDisplayResetButton)
        return undefined;
    return React.createElement(ChevronRightSmallIcon, __assign({ color: iconColor }, chevronIconSize));
};
var renderInlineContent = function (label, appliedLabel, displayValue, isApplied, Icon) {
    var filterLabel = appliedLabel !== null && appliedLabel !== void 0 ? appliedLabel : label;
    return (React.createElement(chakra.span, { overflow: "hidden", whiteSpace: "nowrap", display: "flex", alignItems: "center", w: "full", minW: "0" },
        Icon ? React.createElement(Icon, { h: "xs", w: "xs", mr: "xs" }) : null,
        React.createElement(chakra.span, { overflow: "hidden", textOverflow: "ellipsis" },
            isApplied && displayValue && filterLabel ? (React.createElement(chakra.span, null,
                filterLabel,
                ": ")) : null,
            React.createElement(chakra.span, null, isApplied && displayValue ? displayValue : label))));
};
var renderDefaultContent = function (label, displayValue, isApplied, Icon) { return (React.createElement(chakra.span, { display: "flex", justifyContent: "space-between", w: "full", minW: "0" },
    React.createElement(chakra.span, { mr: "2xl", whiteSpace: "nowrap", display: "flex", alignItems: "center", flexShrink: 0 },
        label,
        Icon ? React.createElement(Icon, { h: "xs", w: "xs", ml: "xs" }) : null),
    React.createElement(chakra.span, { fontWeight: "bold", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", minW: "0", flex: "1", textAlign: "right" }, displayValue && isApplied ? displayValue : null))); };
var renderResetButton = function (shouldDisplayResetButton, resetButtonAriaLabel, isDisabled, onResetFilter, resetButtonConfig) {
    if (!shouldDisplayResetButton)
        return null;
    return (React.createElement(IconButton, __assign({ "aria-label": resetButtonAriaLabel, h: "full", isDisabled: isDisabled, cursor: isDisabled ? 'not-allowed' : 'pointer', onClick: onResetFilter }, resetButtonConfig)));
};
var OpenFilterButton = function (_a) {
    var appliedLabel = _a.appliedLabel, displayValue = _a.displayValue, Icon = _a.Icon, isApplied = _a.isApplied, label = _a.label, onClick = _a.onClick, _b = _a.variant, variant = _b === void 0 ? 'md' : _b, _c = _a.isDisabled, isDisabled = _c === void 0 ? false : _c, height = _a.height, _d = _a.paddingX, paddingX = _d === void 0 ? '0' : _d, _e = _a.backgroundColor, backgroundColor = _e === void 0 ? 'unset' : _e, color = _a.color, _f = _a.showResetButton, showResetButton = _f === void 0 ? true : _f, _g = _a.resetButtonAriaLabel, resetButtonAriaLabel = _g === void 0 ? 'Reset filter' : _g, onResetFilter = _a.onResetFilter, _h = _a.displayType, displayType = _h === void 0 ? 'default' : _h;
    var shouldDisplayResetButton = showResetButton && isApplied && !!onResetFilter;
    var iconColor = getColor(isDisabled, color || 'gray.500');
    var buttonColor = getColor(isDisabled, color || 'gray.900');
    var mainButtonRightPadding = getMainButtonRightPadding(shouldDisplayResetButton, displayType, paddingX);
    var chevronIconSize = getChevronIconSize(displayType);
    var resetButtonConfig = getResetButtonConfig(displayType, iconColor, paddingX);
    var rightIcon = getRightIcon(shouldDisplayResetButton, iconColor, chevronIconSize);
    var buttonContent = displayType === 'inline'
        ? renderInlineContent(label, appliedLabel, displayValue, isApplied, Icon)
        : renderDefaultContent(label, displayValue, isApplied, Icon);
    return (React.createElement(ButtonGroup, { h: height !== null && height !== void 0 ? height : heightFromVariant[variant], isAttached: true, w: "full", maxW: "full", backgroundColor: backgroundColor, borderRadius: "sm" },
        React.createElement(Button, { flex: "1", minW: "0", h: "full", paddingLeft: paddingX, paddingRight: mainButtonRightPadding, cursor: isDisabled ? 'not-allowed' : 'pointer', color: buttonColor, isDisabled: isDisabled, rightIcon: rightIcon, onClick: onClick }, buttonContent),
        renderResetButton(shouldDisplayResetButton, resetButtonAriaLabel, isDisabled, onResetFilter, resetButtonConfig)));
};

export { OpenFilterButton };
//# sourceMappingURL=OpenFilterButton.js.map
