/*!
 * Copyright 2018 by ChartIQ, Inc.
 * All rights reserved.
 *
 */
import React from "react";
import "../../assets/css/tags.css";
/**
 * A reusable fly out component for tags and any other lists
 * This component creates a button with a customizable label
 * and an item click handler.
 * Example: <TagsMenu label="Tags" align="left" list={list} onItemClick={handler}/>
 **/
export default class TagsMenu extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            isVisible: false,
        };
        // Bind context
        this.toggleMenu = this.toggleMenu.bind(this);
        this.onItemClick = this.onItemClick.bind(this);
        this.setWrapperRef = this.setWrapperRef.bind(this);
        this.handleClickOutside = this.handleClickOutside.bind(this);
    }
    componentDidMount() {
        document.addEventListener("mousedown", this.handleClickOutside);
    }
    componentWillUnmount() {
        document.removeEventListener("mousedown", this.handleClickOutside);
    }
    toggleMenu() {
        this.setState({
            isVisible: !this.state.isVisible,
        });
    }
    onItemClick(item) {
        this.setState({
            isVisible: false,
        });
        this.props.onItemClick(item);
    }
    setWrapperRef(node) {
        this.wrapperRef = node;
    }
    handleClickOutside(e) {
        if (this.wrapperRef && !this.wrapperRef.contains(e.target)) {
            this.setState({
                isVisible: false,
            });
        }
    }
    renderList() {
        const items = this.props.list;
        const styles = this.props.align === "right" ? { right: 0 } : { left: 0 };
        return (React.createElement("div", { className: "tags-menu", style: styles },
            React.createElement("ul", null,
                " ",
                items.sort().map((item, index) => {
                    let active = this.props.active.includes(item);
                    return (React.createElement("li", { key: index, onClick: () => this.onItemClick(item) },
                        active ? React.createElement("i", { className: "ff-check-mark" }) : React.createElement("div", { className: "tags-checkmark-wrapper" }, "\u00A0"),
                        "\u00A0\u00A0",
                        item));
                }),
                " ")));
    }
    render() {
        if (this.props.list.length === 0)
            return React.createElement("div", null);
        return (React.createElement("div", { ref: this.setWrapperRef, className: "tags-menu-wrapper", onClick: this.toggleMenu },
            React.createElement("span", null,
                this.props.label,
                React.createElement("i", { className: "ff-chevron-down" })),
            this.state.isVisible && this.renderList()));
    }
}
//# sourceMappingURL=TagsMenu.js.map