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;
};
import React, { useEffect, useState, useRef } from 'react';
import { DebouncedSuggestionsService, SuggestionsService, WALLET_SUGGESTION_ALL_ACTIONS, } from '@universal-login/commons';
import { SuggestionComponent } from './Suggestions';
import { Input } from '../commons/Input';
import Logo from './../assets/logo.svg';
import { Spinner } from '../..';
import { getSuggestion } from '../../core/utils/getSuggestion';
import { useOutsideClick } from '../hooks/useClickOutside';
import { useClassFor, classForComponent } from '../utils/classFor';
export var EnsNamePicker = function (_a) {
    var onCreateClick = _a.onCreateClick, onConnectClick = _a.onConnectClick, sdk = _a.sdk, domains = _a.domains, _b = _a.actions, actions = _b === void 0 ? WALLET_SUGGESTION_ALL_ACTIONS : _b, _c = _a.placeholder, placeholder = _c === void 0 ? 'type a name' : _c;
    var _d;
    var _e = __read(useState(function () {
        return new DebouncedSuggestionsService(new SuggestionsService(sdk, domains, actions));
    }), 1), debouncedSuggestionsService = _e[0];
    var _f = __read(useState(''), 2), ensName = _f[0], setEnsName = _f[1];
    var _g = __read(useState({ connections: [], creations: [] }), 2), suggestions = _g[0], setSuggestions = _g[1];
    var suggestion = suggestions && getSuggestion(suggestions, actions, ensName);
    useEffect(function () {
        setSuggestions(undefined);
        debouncedSuggestionsService.getSuggestions(ensName, setSuggestions);
    }, [ensName]);
    var _h = __read(useState(false), 2), suggestionVisible = _h[0], setSuggestionVisible = _h[1];
    var ref = useRef(null);
    useOutsideClick(ref, function () { return setSuggestionVisible(false); });
    return (React.createElement("div", { ref: ref },
        React.createElement("div", { className: useClassFor('selector-input-wrapper') },
            React.createElement("img", { src: Logo, alt: "Universal login logo", className: classForComponent('selector-input-img') }),
            React.createElement(Input, { className: 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.createElement(Spinner, { className: classForComponent('spinner-busy-indicator') })),
        suggestionVisible && suggestions !== undefined && suggestion &&
            React.createElement(SuggestionComponent, { suggestion: suggestion, onCreateClick: onCreateClick, onConnectClick: onConnectClick, actions: actions })));
};
//# sourceMappingURL=EnsNamePicker.js.map