import ErrorMessage from "../ErrorMessage/ErrorMessage";
import Input from "../Input/Input";
import Modal, { ModalWidth } from "../Modal/Modal";
import Pill from "../Pill/Pill";
import { Black } from "../../../Types/BrandColors";
import React, { useEffect, useState, } from "react";
const ComponentValuePickerModal = (props) => {
    const [selectedReturnValue, setSelectedReturnValue] = useState(null);
    const [selectedComponent, setSelectedComponent] = useState(null);
    const [searchedComponents, setSearchedComponents] = useState([]);
    const [searchText, setSearchText] = useState("");
    useEffect(() => {
        setSearchedComponents(searchReturnValues(props.components, searchText));
    }, [props.components, searchText]);
    const searchReturnValues = (components, searchText) => {
        if (!searchText) {
            return components;
        }
        const searched = [];
        for (const component of components) {
            if (component.metadata.title.includes(searchText) ||
                component.metadata.description.includes(searchText)) {
                searched.push(component);
                continue;
            }
            for (const returnVal of component.metadata.returnValues) {
                if (returnVal.name.includes(searchText) ||
                    returnVal.description.includes(searchText)) {
                    searched.push(component);
                    break;
                }
            }
        }
        return searched;
    };
    return (React.createElement(Modal, { modalWidth: ModalWidth.Large, title: "Select return value from another component", description: "Select a return value from the component this component is connected to.", onClose: props.onClose, disableSubmitButton: !selectedReturnValue, onSubmit: () => {
            if (!selectedReturnValue) {
                return props.onClose();
            }
            if (!selectedComponent) {
                return props.onClose();
            }
            props.onSave(`{{local.components.${selectedComponent.id}.returnValues.${selectedReturnValue.id}}}`);
        } },
        React.createElement("div", null,
            props.components && props.components.length > 0 && (React.createElement("div", { className: "p-2" },
                React.createElement(Input, { placeholder: "Search...", onChange: (value) => {
                        setSearchText(value);
                    } }))),
            React.createElement("div", { className: "max-h-96 mt-5 mb-5 overflow-y-auto" },
                props.components.length === 0 ? (React.createElement(ErrorMessage, { message: "No components in this workflow." })) : (React.createElement(React.Fragment, null)),
                props.components.length > 0 &&
                    searchText &&
                    searchedComponents.length === 0 ? (React.createElement(ErrorMessage, { message: "No components match your search" })) : (React.createElement(React.Fragment, null)),
                searchedComponents &&
                    searchedComponents.length > 0 &&
                    searchedComponents.map((component, i) => {
                        return (React.createElement("div", { className: "p-3 pl-1", key: `component-${i}` },
                            React.createElement("h2", { className: "text-base font-medium text-gray-500" },
                                component.metadata.title,
                                " (",
                                component.id,
                                ")"),
                            React.createElement("p", { className: "text-sm font-medium text-gray-400" }, component.metadata.description),
                            component.metadata.returnValues &&
                                component.metadata.returnValues.length === 0 && (React.createElement(ErrorMessage, { message: "This component does not have any return values." })),
                            component.metadata.returnValues &&
                                component.metadata.returnValues.map((returnValue, i) => {
                                    const isSelected = Boolean(selectedComponent &&
                                        component.id === selectedComponent.id &&
                                        selectedReturnValue &&
                                        selectedReturnValue.id === returnValue.id);
                                    return (React.createElement("div", { key: i, onClick: () => {
                                            setSelectedComponent(component);
                                            setSelectedReturnValue(returnValue);
                                        }, className: `cursor-pointer mt-2 mb-2 relative flex items-center space-x-3 rounded-lg border border-gray-300 bg-white px-6 py-5 shadow-sm focus-within:ring-2 focus-within:ring-pink-500 focus-within:ring-offset-2 hover:border-gray-400 ${isSelected ? "ring ring-indigo-500" : ""}` },
                                        React.createElement("div", { className: "min-w-0 flex-1 flex justify-between" },
                                            React.createElement("div", { className: "focus:outline-none" },
                                                React.createElement("span", { className: "absolute inset-0", "aria-hidden": "true" }),
                                                React.createElement("p", { className: "text-sm font-medium text-gray-900" },
                                                    returnValue.name,
                                                    " ",
                                                    React.createElement("span", { className: "text-gray-500 font-normal" },
                                                        "(ID: ",
                                                        returnValue.id,
                                                        ")")),
                                                React.createElement("p", { className: "truncate text-sm text-gray-500" }, returnValue.description)),
                                            React.createElement("div", null,
                                                React.createElement(Pill, { color: Black, text: returnValue.type })))));
                                })));
                    })))));
};
export default ComponentValuePickerModal;
//# sourceMappingURL=ComponentValuePickerModal.js.map