"use strict";
var __read = (this && this.__read) || function (o, n) {
    var m = typeof Symbol === "function" && o[Symbol.iterator];
    if (!m) return o;
    var i = m.call(o), r, ar = [], e;
    try {
        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
    }
    catch (error) { e = { error: error }; }
    finally {
        try {
            if (r && !r.done && (m = i["return"])) m.call(i);
        }
        finally { if (e) throw e.error; }
    }
    return ar;
};
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
    result["default"] = mod;
    return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
var react_1 = __importStar(require("react"));
var commons_1 = require("@universal-login/commons");
var Suggestions_1 = require("./Suggestions");
var Input_1 = require("../commons/Input");
var logo_svg_1 = __importDefault(require("./../assets/logo.svg"));
var __1 = require("../..");
var getSuggestion_1 = require("../../core/utils/getSuggestion");
var useClickOutside_1 = require("../hooks/useClickOutside");
var classFor_1 = require("../utils/classFor");
exports.EnsNamePicker = function (_a) {
    var onCreateClick = _a.onCreateClick, onConnectClick = _a.onConnectClick, sdk = _a.sdk, domains = _a.domains, _b = _a.actions, actions = _b === void 0 ? commons_1.WALLET_SUGGESTION_ALL_ACTIONS : _b, _c = _a.placeholder, placeholder = _c === void 0 ? 'type a name' : _c;
    var _d;
    var _e = __read(react_1.useState(function () {
        return new commons_1.DebouncedSuggestionsService(new commons_1.SuggestionsService(sdk, domains, actions));
    }), 1), debouncedSuggestionsService = _e[0];
    var _f = __read(react_1.useState(''), 2), ensName = _f[0], setEnsName = _f[1];
    var _g = __read(react_1.useState({ connections: [], creations: [] }), 2), suggestions = _g[0], setSuggestions = _g[1];
    var suggestion = suggestions && getSuggestion_1.getSuggestion(suggestions, actions, ensName);
    react_1.useEffect(function () {
        setSuggestions(undefined);
        debouncedSuggestionsService.getSuggestions(ensName, setSuggestions);
    }, [ensName]);
    var _h = __read(react_1.useState(false), 2), suggestionVisible = _h[0], setSuggestionVisible = _h[1];
    var ref = react_1.useRef(null);
    useClickOutside_1.useOutsideClick(ref, function () { return setSuggestionVisible(false); });
    return (react_1.default.createElement("div", { ref: ref },
        react_1.default.createElement("div", { className: classFor_1.useClassFor('selector-input-wrapper') },
            react_1.default.createElement("img", { src: logo_svg_1.default, alt: "Universal login logo", className: classFor_1.classForComponent('selector-input-img') }),
            react_1.default.createElement(Input_1.Input, { className: classFor_1.classForComponent('input-wallet-selector') + " " + (((_d = suggestion) === null || _d === void 0 ? void 0 : _d.kind) === 'KeepTyping' && 'error'), id: "loginInput", onChange: function (event) { return setEnsName(event.target.value.toLowerCase()); }, placeholder: placeholder, autoFocus: true, checkSpelling: false, onFocus: function () { return setSuggestionVisible(true); } }),
            suggestions === undefined && ensName !== '' && react_1.default.createElement(__1.Spinner, { className: classFor_1.classForComponent('spinner-busy-indicator') })),
        suggestionVisible && suggestions !== undefined && suggestion &&
            react_1.default.createElement(Suggestions_1.SuggestionComponent, { suggestion: suggestion, onCreateClick: onCreateClick, onConnectClick: onConnectClick, actions: actions })));
};
//# sourceMappingURL=EnsNamePicker.js.map