import React from "react";
import { getStore } from "../stores/LauncherStore";
import storeActions from "../stores/StoreActions";
export default class SearchBox extends React.Component {
    constructor(props) {
        super(props);
        this.textInput = React.createRef();
        this.state = {
            search: storeActions.getSearchText(),
        };
        this.onSearch = this.onSearch.bind(this);
        this.clearSearch = this.clearSearch.bind(this);
        this.focus = this.focus.bind(this);
        this.onFilterTextUpdated = this.onFilterTextUpdated.bind(this);
    }
    // Push value to store, which will come back to us via an update.
    // This redirection is necessary so that other parts of the program can
    // change filterText and the searchBox will actually update.
    async onSearch(event) {
        var _a;
        await ((_a = getStore()) === null || _a === void 0 ? void 0 : _a.set(["filterText"], event.target.value));
    }
    async clearSearch() {
        var _a;
        await ((_a = getStore()) === null || _a === void 0 ? void 0 : _a.set(["filterText"], null));
        this.focus();
    }
    onFilterTextUpdated(error, update) {
        this.setState({
            search: update.value || "",
        });
    }
    focus() {
        var _a, _b;
        (_b = (_a = this.textInput) === null || _a === void 0 ? void 0 : _a.current) === null || _b === void 0 ? void 0 : _b.focus();
    }
    UNSAFE_componentWillMount() {
        var _a;
        (_a = getStore()) === null || _a === void 0 ? void 0 : _a.addListener({ field: "filterText" }, this.onFilterTextUpdated);
    }
    componentWillUnmount() {
        var _a;
        (_a = getStore()) === null || _a === void 0 ? void 0 : _a.removeListener({ field: "filterText" }, this.onFilterTextUpdated);
    }
    render() {
        return (React.createElement("div", { className: "search-box" },
            React.createElement("i", { className: "ff-search" }),
            React.createElement("input", { required: true, className: "input-box", ref: this.textInput, value: this.state.search, type: "text", placeholder: "Search", onChange: this.onSearch }),
            React.createElement("button", { className: "close-icon", onClick: this.clearSearch, type: "reset" })));
    }
}
//# sourceMappingURL=SearchBox.js.map