/*!
 * Copyright 2017 by ChartIQ, Inc.
 * All rights reserved.
 */
import React, { Component } from "react";
// data
import storeActions from "../stores/storeActions";
// components
import Toast from "./Toast";
import Tag from "../../shared/Tag";
import TagsMenu from "../../shared/TagsMenu";
/**
 * The search bar, tags filter menu, and any active tags being filtered on
 * @param {object} props Component props
 * @param {boolean} [props.backButton] If true, display a back button for going back to the homepage
 * @param {array} props.tags An array of all available tags for the tags menu
 * @param {array} props.activeTags An array of active tags acting as search criteria
 * @param {func} props.goHome Function to handle sending the app back to the homepage
 * @param {string} props.installationActionTaken Name of action that handles display/hiding the success/failure message from adding/removing an app
 */
class SearchBar extends Component {
    constructor(props) {
        super(props);
        this.textInput = React.createRef();
        this.state = {
            tagSelectorOpen: false,
            searchText: "",
        };
        this.bindCorrectContext();
    }
    bindCorrectContext() {
        this.goHome = this.goHome.bind(this);
        this.changeSearch = this.changeSearch.bind(this);
        this.toggleTagSelector = this.toggleTagSelector.bind(this);
        this.selectTag = this.selectTag.bind(this);
        this.removeTag = this.removeTag.bind(this);
        this.focus = this.focus.bind(this);
    }
    /**
     * Handles changing the component state for handling local input value. Also calls parent function to effect the store
     * @param {object} e React Synthetic event
     */
    changeSearch(e) {
        const { value: searchTerms } = e.target;
        this.setState({ searchText: searchTerms });
        this.props.search(searchTerms);
    }
    /**
     * Opens/hides the tag selection menu
     */
    toggleTagSelector() {
        this.setState({
            tagSelectorOpen: !this.state.tagSelectorOpen,
        });
    }
    /**
     * Calls parent function to add a tag to filters
     * @param {string} tag The name of the tag
     */
    selectTag(tag) {
        let tags = storeActions.getActiveTags();
        this.setState({
            tagSelectorOpen: false,
        }, () => {
            if (tags.includes(tag)) {
                storeActions.removeTag(tag);
            }
            else {
                storeActions.addTag(tag);
            }
        });
    }
    /**
     * Calls parent function to remove a tag from filters
     * @param {string} tag The name of the tag
     */
    removeTag(tag) {
        storeActions.removeTag(tag);
    }
    /**
     * Clears search because 'back' button was clicked
     */
    goHome() {
        this.setState({ searchText: "" });
        this.props.goHome();
    }
    focus() {
        var _a, _b;
        (_b = (_a = this.textInput) === null || _a === void 0 ? void 0 : _a.current) === null || _b === void 0 ? void 0 : _b.focus();
    }
    render() {
        const activeTags = storeActions.getActiveTags();
        return (React.createElement("div", { className: "search-main" },
            React.createElement(Toast, { installationActionTaken: this.props.installationActionTaken }),
            React.createElement("div", { className: "search-action-items" },
                this.props.backButton ? (React.createElement("div", { className: "search-back", onClick: this.goHome },
                    React.createElement("i", { className: "ff-arrow-back" }),
                    React.createElement("span", { className: "button-label" }, "Back"))) : null,
                React.createElement("div", { className: "search-input-container" },
                    React.createElement("i", { className: "ff-search" }),
                    React.createElement("input", { className: "search-input", required: true, ref: this.textInput, placeholder: "Search", type: "text", value: this.state.searchText, onChange: this.changeSearch }),
                    React.createElement("button", { className: "close-icon", onClick: this.goHome, type: "reset" })),
                React.createElement(TagsMenu, { active: activeTags, list: this.props.tags, onItemClick: this.selectTag, label: "Tags", align: "right" })),
            React.createElement("div", { className: "label-bar" }, activeTags.map((tag) => (React.createElement(Tag, { key: tag, name: tag, removeTag: this.removeTag }))))));
    }
}
export default SearchBar;
//# sourceMappingURL=SearchBar.js.map