import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Icon, PowerhouseButton } from "@powerhousedao/design-system";
import { IdAutocomplete, Input } from "@powerhousedao/design-system/ui";
import { useCallback, useMemo, useState } from "react";
const ProviderIconMap = {
    npm: { icon: "Npm" },
    github: { icon: "Github", size: 28 },
    local: { icon: "Hdd" },
};
const PackageItem = ({ packageName, provider }) => {
    const icon = provider && ProviderIconMap[provider];
    return (_jsxs("div", { className: "flex w-full items-center justify-between px-2 py-1", children: [_jsx("p", { className: "font-medium", children: packageName }), icon && _jsx(Icon, { name: icon.icon, size: icon.size })] }));
};
export const PackageManagerInput = (props) => {
    const { onInstall, packageOptions, className } = props;
    const [value, setValue] = useState("");
    const [loading, setLoading] = useState(false);
    const [error, setError] = useState();
    const handleSubmit = useCallback(() => {
        const result = onInstall(value);
        if (result) {
            setLoading(true);
            result
                .then(() => setValue(""))
                .catch(setError)
                .finally(() => setLoading(false));
        }
        else {
            setValue("");
            setError(undefined);
        }
    }, [onInstall, value]);
    const handleChange = useCallback((e) => {
        setValue(e.target.value);
    }, []);
    const errorMessage = !error
        ? " "
        : typeof error === "string"
            ? error
            : error instanceof Error
                ? error.message
                : error;
    const autoCompleteOptions = useMemo(() => {
        const initialOptions = packageOptions?.map((option) => ({
            ...option,
            value: option.packageName,
        }));
        return !packageOptions?.length
            ? {
                autoComplete: false,
            }
            : {
                autoComplete: true,
                initialOptions,
                fetchOptionsCallback: (userInput) => initialOptions?.filter((o) => o.packageName.toLowerCase().includes(userInput.toLowerCase())) ?? [],
                renderOption: (option) => (_jsx(PackageItem, { ...option })),
            };
    }, [packageOptions]);
    return (_jsxs("div", { className: className, children: [_jsx("h3", { className: "mb-4 font-semibold text-gray-900", children: "Install Package" }), _jsxs("div", { className: "flex items-center gap-4", children: [!packageOptions?.length ? (_jsx(Input, { name: "package", className: "max-w-xs text-gray-700", value: value, onChange: handleChange, onSubmit: handleSubmit, disabled: loading })) : (_jsx(IdAutocomplete, { ...autoCompleteOptions, onChange: setValue })), _jsx(PowerhouseButton, { className: "h-9 rounded-md text-sm", onClick: handleSubmit, disabled: loading, children: "Install" })] }), _jsx("p", { className: "mb-3 ml-2 h-3 text-sm text-red-800", children: errorMessage })] }));
};
//# sourceMappingURL=package-manager-input.js.map