import useComponentOutsideClick from "../../../Types/UseComponentOutsideClick";
import Icon from "../../Icon/Icon";
import CreateNewProjectButton from "./CreateNewProjectButton";
import ProjectPickerMenu from "./ProjectPickerMenu";
import ProjectPickerMenuItem from "./ProjectPickerMenuItem";
import IconProp from "../../../../Types/Icon/IconProp";
import React, { useEffect, useState, } from "react";
const ProjectPicker = (props) => {
    const { ref, isComponentVisible, setIsComponentVisible } = useComponentOutsideClick(false);
    const [isDropdownVisible, setDropdownVisible] = useState(false);
    const [filterValue, setFilterValue] = useState("");
    useEffect(() => {
        setDropdownVisible(isComponentVisible);
        setFilterValue("");
    }, [isComponentVisible]);
    return (React.createElement("div", { className: "w-64" },
        React.createElement("div", { className: "relative w-full" },
            React.createElement("button", { onClick: () => {
                    setIsComponentVisible(!isDropdownVisible);
                }, type: "button", className: "relative w-full cursor-pointer rounded-lg border border-gray-200 bg-gray-50 py-2.5 pl-3 pr-10 text-left hover:bg-gray-100 hover:border-gray-300 focus:border-indigo-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-1 transition-all duration-150 sm:text-sm", "aria-haspopup": "listbox", "aria-expanded": "true", "aria-labelledby": "listbox-label" },
                React.createElement("span", { className: "flex items-center" },
                    React.createElement(Icon, { icon: props.selectedProjectIcon, className: "h-5 w-5 flex-shrink-0 text-gray-500" }),
                    React.createElement("span", { className: "ml-2.5 block truncate font-medium text-gray-700" }, props.selectedProjectName)),
                React.createElement("span", { className: "pointer-events-none absolute inset-y-0 right-0 ml-3 flex items-center pr-2" },
                    React.createElement(Icon, { icon: IconProp.UpDownArrow, className: "h-4 w-4 text-gray-400" }))),
            React.createElement("div", { ref: ref }, isComponentVisible && (React.createElement(ProjectPickerMenu, { onFilter: (value) => {
                    setFilterValue(value.toLowerCase().trim());
                } },
                React.createElement(React.Fragment, null, props.projects && props.projects.length > 0 ? (props.projects
                    .filter((project) => {
                    if (!filterValue) {
                        return true;
                    }
                    return (project.name &&
                        project.name.toLowerCase().startsWith(filterValue));
                })
                    .map((project, i) => {
                    return (React.createElement(ProjectPickerMenuItem, { key: i, project: project, onProjectSelected: (project) => {
                            setIsComponentVisible(false);
                            props.onProjectSelected(project);
                        }, icon: IconProp.Folder }));
                })) : (React.createElement(React.Fragment, null))),
                !props.hideCreateProjectButton ? (React.createElement(CreateNewProjectButton, { onCreateButtonClicked: () => {
                        setIsComponentVisible(false);
                        props.onCreateProjectButtonClicked();
                    } })) : (React.createElement(React.Fragment, null))))))));
};
export default ProjectPicker;
//# sourceMappingURL=ProjectPicker.js.map