"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.IconSelector = void 0;
const tslib_1 = require("tslib");
const react_1 = tslib_1.__importDefault(require("react"));
const AdaptableInput_1 = tslib_1.__importDefault(require("../../View/Components/AdaptableInput"));
const Icon_1 = require("../Icon");
const icons_1 = require("../icons");
const OverlayTrigger_1 = tslib_1.__importDefault(require("../OverlayTrigger"));
const SimpleButton_1 = tslib_1.__importDefault(require("../SimpleButton"));
const Flex_1 = require("../Flex");
const IconButton = (props) => {
    return (react_1.default.createElement(SimpleButton_1.default, { onClick: () => props.onClick(), className: "twa:p-2", variant: props.active ? 'raised' : 'text', tone: props.active ? 'accent' : 'none', icon: props.icon }, props.children));
};
const IconSelector = (props) => {
    const [query, setQuery] = react_1.default.useState('');
    const allIconsNames = Object.keys(icons_1.allIcons);
    const filteredIcons = query
        ? allIconsNames.filter((iconName) => {
            return iconName.toLowerCase().includes(query.toLowerCase());
        })
        : allIconsNames;
    const iconsElements = filteredIcons.map((iconName) => {
        return (react_1.default.createElement(Flex_1.Flex, { key: iconName },
            react_1.default.createElement(IconButton, { onClick: () => props.onChange(iconName), active: iconName === props.value, icon: iconName })));
    });
    const customIconsElements = props.customIcons?.map((def) => {
        return (react_1.default.createElement(IconButton, { key: def.name, active: false, onClick: () => props.onChange(def.name) },
            react_1.default.createElement(Icon_1.IconComponent, { key: def.name, icon: def.icon })));
    });
    const popup = (react_1.default.createElement(Flex_1.Box, { className: "ab-IconSelector__Popup" },
        react_1.default.createElement(Flex_1.Box, { className: "twa:mb-2" },
            react_1.default.createElement(Flex_1.Box, { className: "twa:mb-2 twa:text-4" }, "Select an Icon"),
            react_1.default.createElement(AdaptableInput_1.default, { value: query, onChange: (event) => setQuery(event.target.value ?? ''), className: "twa:w-full" })),
        react_1.default.createElement(Flex_1.Flex, { className: "twa:p-2 twa:w-[300px] twa:max-h-[300px] twa:overflow-auto twa:flex-wrap" },
            iconsElements,
            " ",
            customIconsElements)));
    let value = 'No Icon Selected';
    if (props.value in icons_1.allIcons) {
        value = (react_1.default.createElement(icons_1.Icon, { style: { display: 'inline-block' }, name: props.value }));
    }
    else {
        const icon = props.customIcons?.find((def) => def.name === props.value);
        if (icon)
            value = react_1.default.createElement(Icon_1.IconComponent, { icon: icon.icon });
    }
    return (react_1.default.createElement(Flex_1.Flex, { className: "ab-IconSelector" },
        react_1.default.createElement(OverlayTrigger_1.default, { preventPortalEventPropagation: false, render: () => popup, showEvent: "mouseenter", hideEvent: "mouseleave", hideDelay: 300 },
            react_1.default.createElement(SimpleButton_1.default, { className: "ab-IconSelector__trigger twa:text-center twa:w-[150px] twa:justify-center", onClick: () => null, variant: "raised" }, value)),
        (props.clearable ?? true) && (react_1.default.createElement(SimpleButton_1.default, { disabled: !props.value, className: "ab-IconSelector__clear-button twa:ml-2", onClick: (event) => {
                event.stopPropagation();
                event.preventDefault();
                props.onChange('');
            }, variant: "text", icon: "close" }))));
};
exports.IconSelector = IconSelector;
