import useComponentOutsideClick from "../../../Types/UseComponentOutsideClick";
import Icon from "../../Icon/Icon";
import Input, { InputType } from "../../Input/Input";
import IconProp from "../../../../Types/Icon/IconProp";
import React, { useEffect, useState, } from "react";
const IconPicker = (props) => {
    const [selectedIcon, setSelectedIcon] = useState(null);
    const [searchQuery, setSearchQuery] = useState("");
    const { ref, isComponentVisible, setIsComponentVisible } = useComponentOutsideClick(false);
    const [isInitialValuesInitialized, setIsInitialValuesInitialized] = useState(false);
    useEffect(() => {
        if (props.initialValue && !isInitialValuesInitialized) {
            setSelectedIcon(props.initialValue);
            setIsInitialValuesInitialized(true);
        }
    }, [props.initialValue]);
    const handleChange = (icon) => {
        setSelectedIcon(icon);
        props.onChange(icon);
        setIsComponentVisible(false);
    };
    // Get all icons from IconProp enum
    const allIcons = Object.values(IconProp);
    // Filter icons based on search query
    const filteredIcons = allIcons.filter((icon) => {
        return icon.toLowerCase().includes(searchQuery.toLowerCase());
    });
    return (React.createElement("div", null,
        React.createElement("div", { className: "flex block w-full rounded-md border border-gray-300 bg-white py-2 pl-3 pr-3 text-sm placeholder-gray-500 focus:border-indigo-500 focus:text-gray-900 focus:placeholder-gray-400 focus:outline-none focus:ring-1 focus:ring-indigo-500 sm:text-sm" },
            React.createElement("div", { onClick: () => {
                    if (!props.readOnly && !props.disabled) {
                        setIsComponentVisible(!isComponentVisible);
                    }
                }, className: "flex items-center justify-center h-5 w-5 cursor-pointer" }, selectedIcon ? (React.createElement(Icon, { icon: selectedIcon, className: "h-5 w-5 text-gray-600" })) : (React.createElement("div", { className: "h-5 w-5 border border-dashed border-gray-300 rounded" }))),
            React.createElement(Input, { onClick: () => {
                    if (!props.readOnly && !props.disabled) {
                        setIsComponentVisible(!isComponentVisible);
                    }
                }, disabled: props.disabled, dataTestId: props.dataTestId, onBlur: props.onBlur, onEnterPress: props.onEnterPress, className: "border-none focus:outline-none w-full pl-2 text-gray-500 cursor-pointer", outerDivClassName: 'className="border-none focus:outline-none w-full pl-2 text-gray-500 cursor-pointer"', placeholder: props.placeholder, value: selectedIcon || props.value || "", readOnly: true, type: InputType.TEXT, tabIndex: props.tabIndex, onChange: () => { }, onFocus: props.onFocus || undefined }),
            selectedIcon && !props.disabled && (React.createElement(Icon, { icon: IconProp.Close, className: "text-gray-400 h-5 w-5 cursor-pointer hover:text-gray-600", onClick: () => {
                    setSelectedIcon(null);
                    props.onChange(null);
                } })),
            isComponentVisible ? (React.createElement("div", { ref: ref, className: "absolute z-50 mt-8 bg-white border border-gray-200 rounded-lg shadow-lg p-3", style: {
                    width: "320px",
                    maxHeight: "400px",
                } },
                React.createElement("div", { className: "mb-3" },
                    React.createElement(Input, { type: InputType.TEXT, placeholder: "Search icons...", value: searchQuery, onChange: (value) => {
                            setSearchQuery(value);
                        }, className: "w-full px-3 py-2 border border-gray-300 rounded-md text-sm" })),
                React.createElement("div", { className: "grid grid-cols-6 gap-2 overflow-y-auto", style: { maxHeight: "300px" } }, filteredIcons.map((icon) => {
                    return (React.createElement("div", { key: icon, onClick: () => {
                            handleChange(icon);
                        }, className: `flex items-center justify-center p-2 rounded cursor-pointer hover:bg-gray-100 ${selectedIcon === icon
                            ? "bg-indigo-100 ring-2 ring-indigo-500"
                            : ""}`, title: icon },
                        React.createElement(Icon, { icon: icon, className: "h-5 w-5 text-gray-600" })));
                })),
                filteredIcons.length === 0 && (React.createElement("div", { className: "text-center text-gray-500 py-4" }, "No icons found")))) : (React.createElement(React.Fragment, null))),
        props.error && (React.createElement("p", { "data-testid": "error-message", className: "mt-1 text-sm text-red-400" }, props.error))));
};
export default IconPicker;
//# sourceMappingURL=IconPicker.js.map